title: Vue.js - How to get and set a value of a component input field?
body: <p>I just started learning Vue.js but I ran into a problem where I can't figure out how I could access and change a text field value that is inside my component.</p>
  
  <p>Let's say I would like to access or change the value of my first input field that is inside my  component</p>
  
  <p><strong>My component</strong></p>
  
  <pre><code>Vue.component('simple-input',
  {
      template: `
          &lt;input type="text" value="Some value..."&gt;
      `,
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="root"&gt;
    &lt;simple-input&gt;&lt;/simple-input&gt;
    &lt;simple-input&gt;&lt;/simple-input&gt;
    &lt;simple-input&gt;&lt;/simple-input&gt;
  
    &lt;div @click="alertSimpleInput1"&gt;Show first input value&lt;/div&gt;
    &lt;div @click="changeInput1('new value')"&gt;Change input value&lt;/div&gt;
  
    &lt;div @click="alertSimpleInput2"&gt;Show second input value&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>new Vue({
      el: '#root',
  });
  </code></pre>