Variable isn't getting updated

Question

I have this script. In the createApp function, I have a variant variable.

And you can see that I do a console.log(variant) below axios.get(). It logs 'ealjapd (it is the variant content).

But it is supposed to change to results.data.variants[0]. But it isn't changing... any suggestions?

<script>
  if (document.querySelector('#add-to-cart-form')) {
    const app = Vue.createApp({
      delimiters: ['${', '}'],
      setup() {
        let variant = Vue.ref('ea´ljapd');

        axios.get('/products/{{product.handle}}.js').then((results) => {
          variant = Vue.ref(results.data.variants[0]);
          console.log(variant);
        });

        const addToCart = (event) => {
          event.preventDefault();

          axios
            .post('/cart/add.js', data)
            .then((response) => {
              console.log(response);
            })
            .catch((error) => {
              console.log(error);
            });
        };
        return {
          variant,
        };
      },
    }).mount('#add-to-cart-form');
  }
</script>

I can't figure it out, I need help

Answer 1

try this

variant.value = results.data.variants[0]

reference here

https://vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive-variables-with-ref