I looked solution in this way, so God is got me a good point, which I met here https://phphe.com/article/frontend/vue3-meta-simple-solution
So you could use composable object. Like this
//validation.ts
const hasError = refs(false);
function useValidation(value: any, vm: ComponentInternalInstance) {
onMounted(() => {
/* ... do some stuff here for validation value */
hasErrors.value = /* checkValue if it's valid /*
}, vm)
return {
hasErrors
}
}
export {
useValidation
}
then using it, like this:
// component.vue
import { useValidation } from './Validation.ts'
const text = ref('');
const vm = getCurrentInstance();
const { hasErrors } = useValidation(text, vm);
here onMounted has two parameters, first is a hook, and second is a instance of component that has context.
export declare const onMounted: (hook: () => any, target?: ComponentInternalInstance | null) => false | Function | undefined;
Also vue3 api docs has clarification about what is instance of the component:
https://dtinth.github.io/api-documenter-yaml-to-antora-asciidoc/vue3-apidocs-example/api/vue_runtime-core_ComponentInternalInstance_interface.html
And they said that
We expose a subset of properties on the internal instance as they are
useful for advanced external libraries and tools.
Which you could get via method getCurrentInstance()
setup()context does not containroot.rootwas only added in@vue/composition-api's setup context, but that's deprecated. To get the root element of the component, you have to explicitly use a template ref.$how can I do this from the <script setup> syntax? Do you know what I mean?