title: Getting error while importing {ref} from vue?
body: <p>I am a newbie to vue js learning from vue-mastery tutorials and I wrote a code by seeing the tutorial
  My code is</p>
  <pre><code>&lt;template&gt;
  &lt;div&gt;Capacity: {{ capacity }}&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script type=&quot;module&quot;&gt;
  import { ref } from &quot;vue&quot;;
  export default{
  setup(){
  const capacity = ref(3);
  return { capacity };
  }
  };
  &lt;/script&gt;
  </code></pre>
  <p>I am getting the error in terminal when I run this code is
  <strong>&quot;export 'ref' was not found in 'vue'</strong>
  And in web browser error is
  vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method &quot;capacity&quot; 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. See: <a href="https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties</a>.</p>
  <p>found in</p>
  <p>---&gt;  at src/App.vue
  </p>
  <p>My requirement is to print capacity: 3 in the browser anyone please help me Thanks in advance!</p>