difficulties with the new Vue pattern

[airtonctj]

hello, I'm new to vue and I'm facing some difficulties with the script's new default. using this code:

<script setup>
import { ref } from "@vue/reactivity";
import * as AxiosApi from "../../elements/raw/AxiosI2tec.js";
let teste = [];
async function onSearch(search, loading) {
  if (search.length) {
    loading(true);
    AxiosApi.all().then((resp) => {
      teste = ref(Object.keys(resp.data));
      loading(false);
    });
  }
}
</script>

select does not update =(

but if I use this format:

import * as AxiosApi from "../../elements/raw/AxiosI2tec.js";
export default {
  data() {
    return {
      teste: [],
    };
  },
  methods: {
    async onSearch(search, loading) {
      if (search.length) {
        loading(true);
        AxiosApi.all().then((resp) => {
          this.teste = Object.keys(resp.data);
          loading(false);
        });
      }
    },
  },
  beforeMounted() {
    console.log(`the component is now mounted.`)
  }
};

works correctly =)

Why does it happen?

[sagalbot]

You'll need to register that ref() within the setup function itself. Right now it's being registered within the callback, which won't be called during setup, so the ref will not be registered.

Try changing let teste = [] to let teste = ref([]), and then in your callback, do teste = Object.keys(resp.data);

[airtonctj]

thanks, it worked perfectly