title: Why does this Vue3 transition break data binding?
body: <p>I have this issue I've been hitting for hours now; I can't understand why it doesn't work as expected.</p>
  <p>I pasted an example code below. The issue is that when editing the name, {{name}} is not updated. However, if I remove either of the <code>&lt;transition&gt;</code> element or the <code>v-if=&quot;show&quot;</code> condition, then data binding works as expected. Same if the <code>{{name}}</code> is placed outside the transition.</p>
  <p>So it seems the transition blocks data binding? However I don't find anything about it in the docs or elsewere. I tested this code in a Vue2 playground, and it works as expected (data binding works). So the behavior seems to depend on Vue3.</p>
  <p>Is there something I'm missing? Is it a bug in Vue3?</p>
  <p>Thanks in advance for any input or idea.</p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;demo&quot;&gt;
      &lt;button v-on:click=&quot;show = !show&quot;&gt;
        Toggle
      &lt;/button&gt;
  
      &lt;transition name=&quot;fade&quot;&gt;
        &lt;div v-if=&quot;show&quot;&gt;
          &lt;p&gt;hello, {{name}}&lt;/p&gt;
          &lt;input v-model=&quot;name&quot; type=&quot;text&quot; /&gt;
        &lt;/div&gt;
      &lt;/transition&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  
  &lt;script lang=&quot;ts&quot;&gt;
  import { defineComponent } from 'vue';
  export default defineComponent({
    data() {
      return {
        name: &quot;&quot;,
        show: true,
      }
    }
  });
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.8s ease;
  }
  
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
  &lt;/style&gt;
  </code></pre>