setup(props) {
const id = ref(props.id)
watchEffect(() => {
const { data1, data2, data3 } = getData(id)
})
return { data1, data2, data3 }
}
This is just a portion of the code, the watchEffect, ref and getData are all imported but the return function below says data1, data2, data3 are undefined, why is that?
Declare refs outside the function:
setup(props) {
const id = ref(props.id);
const data1 = ref(null);
const data2 = ref(null);
const data3 = ref(null);
watchEffect(() => {
[data1.value, data2.value, data3.value] = getData(id)
})
return { data1, data2, data3 }
}
And if you return an object:
setup(props) {
const id = ref(props.id);
const data1 = ref(null);
const data2 = ref(null);
const data3 = ref(null);
watchEffect(() => {
{
data1: data1.value,
data2: data2.value,
data3: data3.value
} = getData(id)
})
return { data1, data2, data3 }
}
I don't have the rest of your code but I'm sure it can be more optimized...