解决computed属性与input的blur事件冲突问题

背景：搜索框在首页和搜索页复用，需要将首页的搜索内容传到搜索页并显示在搜索框内。传送方式是通过在this.$router.push方法中加query字段。

<template>
  <div class="index-container">
    <a-input-search class="input-shape" v-model="searchInfo" placeholder="Search" @search="searchPaper(sendSearchInfo)" size="large" />
  </div>
</template>

export default {
    
  data() {
    
    return {
    
      sendSearchInfo: ''
    };
  },
  methods: {
    
    searchPaper(sendSearchInfo) {
    
      this.$router.push({
    
        path: '/search?',
        query: {
    
          info: sendSearchInfo
        }
      });
    }
  },
  computed: {
    
    searchInfo: {
    
      get() {
    
        return this.$route.query.info;
      },
      set(val) {
    
        this.sendSearchInfo = val;
      }
    }
  }
};

问题：在input中输入的数据在失去焦点时会消失
原因：页面初始化的时候会执行get()，之后都不再执行，每次输入数据都会执行set()。在检查中把事件监听器中的blur去掉，就不会出现上述问题。但是打印了onblur是null，所以无法去掉。所以是数据返回的问题。
解决方法：

export default {
    
  data() {
    
    return {
    
      sendSearchInfo: ''
    };
  },
  methods: {
    
    searchPaper(sendSearchInfo) {
    
      this.$router.push({
    
        path: '/search?',
        query: {
    
          info: sendSearchInfo
        }
      });
    }
  },
  computed: {
    
    searchInfo: {
    
      get() {
    
        // 因为get涉及到this.sendSearchInfo，所以每次set都会触发get
        if (this.sendSearchInfo != '') {
    
          return this.sendSearchInfo;
        } else {
    
          return this.$route.query.info;
        }
      },
      set(val) {
    
        this.sendSearchInfo = val;
      }
    }
  }
};