vuejs 3 组合 API

Question

Anyone know why the variable number doesn't display the latest value when click on it? I tried using onMounted, but didn't seem to do anything. When I clicked on the paragraph it always displays 1. I expect it to display the latest number added. Any ideas?

<script setup>

  import TheWelcome from '@/components/TheWelcome.vue'
  import { onMounted, ref  } from 'vue'
  import axios from "axios"

  let number = 1; 
    
  function getCurrentNumber() {
    
    number++;

    console.log(number)
  }

</script>


<template>

  <main>
    <TheWelcome />
  </main>
  <p @click="getCurrentNumber">Hello, this is a test to display {{number}}</p>

</template>

Answer 1

This is how it should be

<script setup>
import { ref } from 'vue'

const number = ref(1); 

function getCurrentNumber() {
  number.value++
  console.log(number.value)
}
</script>


<template>
  <p @click="getCurrentNumber">Hello, this is a test to display {{ number }}</p>
</template>

Here is a working example .