Data two-way binding problem when van-popup encapsulates components

Requirement: The input content in the input box is a pop-up box.
Problem: After encapsulating the component, clicking the close button will report an error.

After consulting the information, I found two methods.

The first one: v-model is split into: value and @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>

The second type: using sync syntax (vue2.3+) uses computed getters and setters

    <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);
      }
    }
  },

Reference: https://blog.csdn.net/gp3098/article/details/104407980