title: Vuejs: Can't change ref inside function but can do from template
body: <p>Am trying to learn Vue and have come across the below issue/problem.</p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;{{ name }}&lt;/div&gt;
      &lt;button @click=&quot;name = 'changed name'&quot;&gt;Change&lt;/button&gt;
  &lt;/template&gt;
  &lt;script setup&gt;
      import { ref } from 'vue';
      let name = ref('first');
  &lt;/script&gt;
  </code></pre>
  <p>The above works, when I click on the button, the text inside the div is changed to <strong>changed name</strong>. But the below does not work, is the variable <code>name</code> not available in the function? Have used <code>defineExpose({name})</code> also, still does not work.</p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;{{ name }}&lt;/div&gt;
      &lt;button @click=&quot;changeName&quot;&gt;Change&lt;/button&gt;
  &lt;/template&gt;
  &lt;script setup&gt;
      import { ref } from 'vue';
      let name = ref('first');
      const changeName = () =&gt; {
          name = 'changed name';
      }
  &lt;/script&gt;
  </code></pre>