title: Vue 3, call $emit on variable change
body: <p>So I'm trying to build a component in Vue 3 that acts as a form, and in order for the data to be processed by the parent I want it to emit an object with all the inputs on change. The issue I'm having is that I don't seem to be able to call <code>$emit</code> from within <code>watch()</code> (probably because of the context, but I also don't see why the component-wide context isn't passed by default, and it doesn't accept <code>this</code>). I also cannot call any method because of the same reason.</p>
  <p>I do see some people using the <code>watch: {}</code> syntax but as I understand it that is deprecated and it doesn't make a whole lot of sense to me either.</p>
  <p>Here's a minimal example of what I'm trying to accomplish. Whenever the input date is changed, I want the component to emit a custom event.</p>
  <pre><code>&lt;template&gt;
    &lt;input
      v-model=&quot;date&quot;
      name=&quot;dateInput&quot;
      type=&quot;date&quot;
    &gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { watch, ref } from &quot;vue&quot;;
  
      export default {
          name: 'Demo',
          props: {
          },
          emits: [&quot;date-updated&quot;],
          setup() {
            const date = ref(&quot;&quot;)
  
            watch([date], (newVal) =&gt; {
              // $emit is undefined
              console.log(newVal);
              $emit(&quot;date-updated&quot;, {newVal})
              // watchHandler is undefined
              watchHandler(newVal)
            })
  
            return {
              date
            }
          },
          data() {
              return {
              }
          },
          mounted() {
          },
          methods: {
            watchHandler(newVal) {
              console.log(newVal);
              $emit(&quot;date-updated&quot;, {newVal})
            }
          },
      }
  &lt;/script&gt;
  </code></pre>