title: Prop value lost after running a method Vuejs
body: <p>I made a material design input field as a Vue component. I listen for the focus event and run a function to check the value every time the user focuses out. Here's the code:</p>
  
  <pre><code>&lt;template&gt;
  &lt;span class="h-input-container"&gt;
      &lt;input :type="type" :name="name" v-validate="validation" 
  @focusout="classHandle" :id="id" :value="value"&gt;
      &lt;p :class="focusClass"&gt;&lt;i :class="icon"&gt;&lt;/i&gt;&amp;nbsp;{{placeholder}}&lt;/p&gt;
  &lt;/span&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      mounted: function(){
          if (this.value != '') {
              this.focusClass = 'focused'
          }
      },
      props: {
          placeholder: {
              default: ''
          },
          name: {
              default: 'no-name'
          },
          type: {
              default: 'text'
          },
          validation: {
              default: ''
          },
          icon: {
              default: ''
          },
          id: {
              default: ''
          },
          value: {
              default: ''
          }
      },
      data: function(){
          return {
              focusClass: '',
          }
      },
      methods: {
          classHandle: function(event){
              if (event.target.value != '') {
                  this.focusClass = 'focused'
              } else {
                  this.focusClass = ''
              }
          }
      }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>I pass the value as a prop called <code>value</code> and I've used that value for the input field using <code>:value="value"</code>. The thing is, every time the method <code>classHandle</code> runs, the input field's value disappears. I can't figure out why.</p>