Using Vue 3's Composition API, is it possible to rename reserved keywords when using toRefs()?
[vue/no-parsing-error] Parsing error: The keyword 'package' is reserved.
setup(){
const data = reactive<Foo>({
...
package: {
...
}
})
return { ...toRefs(data) }
}
<template>
{{ package.bar }}
</template>
Linter error specifically refers to {{ package.bar }} and not to object key directly, which is allowed. That toRefs is in use doesn't matter because it's already plain object that has the property in discussion and isn't reactive itself:
{ ...toRefs(data) }
A different name can be assigned to object property in any way that is available in JavaScript, e.g. with a shallow copy:
const { package: packageItem, ...dataRefs } = toRefs(data);
return { packageItem, ...dataRefs };