Vue Cli4.5x版本，v-model绑定组件指令，子组件无法直接访问:value，和通过input修改

本人直接上手了脚手架4.5版本，它的挂载方式是

createApp(App).use(store).use(router).mount('#app')

所以发现这个版本devtools打不开，后来了解到官方还未更新devtools，版本还不能贴切最新版本脚手架！

以往我们都知道（如下父组件中Template某部分）

  <component  v-model="text"></component>
  <component  :value="text" @input="text = arguments[0]"></component>

所以子组件可以通过computed计算属性进行子组件的数据双向绑定(如下子组件)

    <input  v-model="str" type="text">

computed: {
     
    str: {
     
      get () {
     
        return this.value
      },
      set (newVal) {
     
        this.$emit('input', newVal)
      }
    }
  }

这么优美的传递信息方式，我想用在项目中。
结果发现不可以，我发现子组件没有接收到this.value的内容（前提：props已经设定好），打印为undefind，而且子访问夫的input事件也并没有执行。所以，我觉得可能原理发生了变化（如下为子组件绑定后出现的怪异一幕）
在这里插入代码片

所以找了半天发现要用v-model的新特性,v-model:nameProps，
所以父组件改为

<StringInput v-model="default" ></StringInput> // 默认方式
<StringInput v-model:value="title" ></StringInput>

子组件的方式也要更改

  computed: {
     
    default: {
     
      get () {
     
        return this.modelValue // 默认接收方式
 
      },
      set (value) {
     
        this.$emit('update:modelValue', value) // 默认更新方式
      }
    },
    text: {
     
      get () {
     
        return this.value
      },
      set (value) {
     
        this.$emit('update:value', value)
      }
    }
  }

本次没有采用最新的compostionAPI，方便了解。