title: "Property or method "foo" is not defined on the instance but referenced during render" Vuejs Typescript
body: <blockquote>
    <p>Property or method "foo" is not defined on the instance
    but referenced during render. Make sure that this property is
    reactive, either in the data option, or for class-based components, by
    initializing the property.</p>
  </blockquote>
  
  <p>I have worked with vuejs, now I'm shifting to typescript facing this issue for trying to access a simple property and making it reactive.</p>
  
  <p>Similar question has been asked but no solution yet :
  <a href="https://stackoverflow.com/questions/51140028/vue-class-based-component-warning-property-is-not-defined-on-the-instance-but-r/53002608#53002608">Vue Class Based Component Warning: Property is not defined on the instance but referenced during render</a></p>
  
  <pre><code>&lt;template&gt;
      &lt;section class="dropdown" style="background-color: #dde0e3"&gt;
        &lt;select class="btnList" v-model="foo"&gt;
          &lt;option v-for="item in selectedfooData" :value="item" :key="item.id"&gt;{{item}}&lt;/option&gt;
        &lt;/select&gt;
        {{foo}}
      &lt;/section&gt;
  &lt;/template&gt;
  
  &lt;script lang="ts"&gt;
   import { Component, Prop, Vue } from 'vue-property-decorator';
   @Component
   export default class HelloWorld extends Vue {  
     private foo: string;
       private selectedfooData : string[] = [
       'one',
       'two'
       ]
   }
  &lt;/script&gt;
  </code></pre>
  
  <p>I have tried a workaround for this by adding the property as a prop but this gives me error saying, So what is the right way to try this out ?</p>
  
  <blockquote>
    <p>Avoid mutating a prop directly since the value will be overwritten
    whenever the parent component re-renders. Instead, use a data or
    computed property based on the prop's value. Prop being mutated:
    "foo"</p>
  </blockquote>
  
  <pre><code> @prop()
   private foo: string;
  </code></pre>