title: Using $emit to call a function
body: <p>I'm new to vue.js and am trying to understand how <code>$emit</code> can be used. In the following code, every <code>input</code> element except for the last one works as expected.</p>
  <p>My assumption in the last <code>input</code> element is that calling <code>$emit</code> with an event name would be the same as calling the function which has that event name, but it doesn't call that function. What is occurring with this $emit?</p>
  <p>I've read through <a href="https://v2.vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components" rel="nofollow noreferrer">Binding Native Events to Components</a> and that shows that it is to be used differently as I'm doing it. All this approach started from me watching a YouTube video (7 Secret Patterns...), specifically at this time <a href="https://youtu.be/7lpemgMhi0k?t=21m57s" rel="nofollow noreferrer">https://youtu.be/7lpemgMhi0k?t=21m57s</a> where you can see that usage on the slide.</p>
  <p>Here is the code in JSFiddle <a href="https://jsfiddle.net/sbtmfweq/" rel="nofollow noreferrer">https://jsfiddle.net/sbtmfweq/</a></p>
  <pre><code>&lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;&gt;&lt;/script&gt;
  
  
  &lt;div id=&quot;test-app&quot;&gt;
    &lt;input v-model=&quot;text1&quot; placeholder=&quot;edit me&quot; @keyup.enter=&quot;submit&quot;&gt; {{ text1 }}
    &lt;br&gt;&lt;br&gt;
    &lt;input :value=&quot;text2&quot; @input=&quot;inputEvent&quot; @keyup.enter=&quot;submit&quot;&gt; {{ text2 }}
    &lt;br&gt;&lt;br&gt;
    &lt;input :value=&quot;text2&quot; @input=&quot;inputEvent($event)&quot; @keyup.enter=&quot;submit&quot;&gt; {{ text2 }}
    &lt;br&gt;&lt;br&gt;
    &lt;input :value=&quot;text2&quot; @input=&quot;$emit('inputEvent', $event.target.value)&quot;&gt; {{ text2 }} | {{reversedText2}}
  &lt;/div&gt;
  
  &lt;script&gt;
  
    new Vue({
      el: '#test-app',
      data: {
        text1: 'text1',
        text2: 'text2',
      },
      methods: {
        log: console.log,
        submit: function(event) {
          console.log(&quot;submit --&gt;&quot;, event, event.target.value, '&lt;--')
        },
        inputEvent: function(event) {
          console.log(&quot;input 2 --&gt;&quot;, event.target.value, '&lt;--')
          this.text2 = event.target.value
        },
      },
      watch: {
        text1: {
          handler: function(newValue, oldValue) {
            console.log(&quot;input 1 --&gt;&quot;, newValue, '&lt;--&gt;', oldValue, '&lt;--')
          }
        }
      },
      computed: {
        reversedText2: function () {
          return this.text2.toUpperCase()
        }
      }
    })
  
  &lt;/script&gt;
  </code></pre>