I am currently in the process of converting a basic SFC to utilize the new Vue CompositionAPI. The original code functions perfectly:
export default {
data() {
return {
miniState: true
}
},
methods: {
setMiniState(state) {
if (this.$q.screen.width > 1023) {
this.miniState = false;
} else if (state !== void 0) {
this.miniState = state === true
}
else {
this.miniState = true
}
},
},
watch: {
'$q.screen.width'() {
this.setMiniState()
}
}
};
When attempting to convert this to the new CompositionAPI, the code ends up looking like this:
export default defineComponent({
setup() {
const miniState = ref(true)
const setMiniState = (state) => {
if ($q.screen.width > 1023) {
miniState.value = false
} else if (state !== void 0) {
miniState.value = state === true
}
else {
miniState.value = true
}
}
watch('$q.screen.width'(),
setMiniState()
)
return {
miniState, setMiniState
}
}
})
However, I keep encountering an error where Vue complains that $q.screen.width is not a function. What could be causing this issue?