[Vue warn]: Property "$id" was accessed during render but is not defined on instance.

[d-ryabtsev]

This error seems to be coming up everywhere now that we have moved to Vue 3. This is just 1 example where I am observing it.

Here's a code example:

<template>
	<link
		v-if="isLicensed(resource)"
		:disabled="!canView(resource)"
	>
		{{ title }}
	</link>
</template>

<script>
import { useAuthorizationStore } from './authorization-store.js'
import { useLicenceStore } from './licence-store.js'
import { mapState } from 'pinia'

export default {
	name: 'menu-item-link',
	props: {
		title: String,
		resource: String,
		route: Object
	},
	computed: {
		...mapState(useAuthorizationStore, ['canView']),
		...mapState(useLicenceStore, ['isLicensed'])
	}
}
</script>

It doesn't seem to like the way I am using canView which is technically is an action which is imported from the pinia module. It looks like this:

function canView (resource) {
	return can('view', resource)
}
export {
   canView
}

However.. if I turn the action into a computed property, the warning goes away:

const canView = computed(() => resource => can('view', resource))

Does anyone have any tips? It seems that it is looking for $id on the component instance but it is undefined. It seems that it is unhappy with me exporting an action which uses computed properties inside to generate state. I would have thought that I shouldn't have to export something as computed if it needs a parameter?