Not a bug

https://forum.vuejs.org/t/vue-3-bug-v-model-sub-component-strange-behaviour/102399

by ChrisWong

HTML

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <div id="app">
    <component-a @update:modelValue="myData = $event"></component-a>
    <span>Data: {{ myData }}</span>
  </div>
</div>

SCSS

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}

JavaScript

const app = Vue.createApp({
  data() {
    return {
      myData: "initial",
    };
   }
});

app.component("component-a", {
  props: {
    modelValue: String,
  },

  template: `
    <component-b 
      :modelValue="modelValue"
      @update:modelValue="$emit('update:modelValue', $event)"
    />`,
});

app.component("component-b", {
  props: {
    modelValue: String,
  },
  template: `
    <button
       @click="emit"
    >Click B</button>`,
  methods: {
  	emit: function() {
    	this.$emit("update:modelValue", "from B")
    }
  }
});

app.mount('#app');