Problema de ligação bidirecional de dados quando van-popup encapsula componentes

Requisito: O conteúdo de entrada na caixa de entrada é uma caixa pop-up.
Problema: Após encapsular o componente, clicar no botão Fechar reportará um erro.

Após consultar as informações, encontrei dois métodos.

O primeiro: v-model é dividido em: value e @input

    父组件内调用子组件使用v-model
    子组件内的孙组件（van-popup）的v-model拆分成:value和@input
    然后通过$emit完成数据同步
    van-popup绑定的value对应从父组件内传来的props内的value
    van-popup的input事件生成的新值弹射到父组件v-model对应的默认input事件参数

    <van-popup
      :value="popupIsShow"
      @input="val => this.$emit('input', val)"
      round
      closeable
      position="bottom"
      :style="{ height: '30%' }"
    >
      <div
        style="margin-bottom: 1.333vw"
        v-for="(item, index) in list"
        :key="index"
        @click="clickTag(item)"
      >
        {
    
    {
    
     item }}
      </div>
    </van-popup>

O segundo tipo: usar sintaxe de sincronização (vue2.3+) usa getters e setters computados

    <van-popup
      v-model="vanpopup"
      round
      closeable
      position="bottom"
      :style="{ height: '30%' }"
    >
      <div
        style="margin-bottom: 1.333vw"
        v-for="(item, index) in list"
        :key="index"
        @click="clickTag(item)"
      >
        {
    
    {
    
     item }}
      </div>
    </van-popup>



  computed: {
    
    
    vanpopup: {
    
    
      get() {
    
    
        return this.popupIsShow;
      },
      set(value) {
    
    
        this.$emit("update:popup", value);
      }
    }
  },

Referência: https://blog.csdn.net/gp3098/article/details/104407980