Can't call child finction in parent component uses defineComponent

[alwaqfi]

Dears,

I'm working on a personal project where I'm separating template from script in to 2 files (3 files if we will include style).

I have 2 parent components
Parent1: HomeView.vue
Parent2: HomeView2.vue

Child: Child.vue

Problem:
Case 1:
If I try to call print function that is defined in the child component inside Parent1 then nothing happens because childRef.value resolve to undefined so the print will not be called. The parent script is in HomeView.ts wrapped n defineComponent

Case 2:
In the case of Parent2, it works fine; however it uses <script setup> same as the Child component.

Question:
Any idea how can I make Case 1 works? and any problems mixing components like in Case1?

Sample Repo: https://github.com/alwaqfi/vue-project

Thanks

I tried to look for similar problems uses these search:
child function, call child

[edison1105]

This is not supported <script lang="ts" src="./HomeView.ts"></script>

[alwaqfi]

@edison1105 Thank you for your reply,

If you don't mind can you explain what do you mean by it is not supported? Does it mean Vue3 does not support/have splitting files ( as in Parent1)?

I'm in the early development of my personal project so still fixable/easy to do any modification. So, if Vue3 does not support/have/encourage a seperate file for template script style I will merge everything I did to single file.

[edison1105]

Does it mean Vue3 does not support/have splitting files ( as in Parent1)?

Yes, It does not support load script from a separate file like <script src="./HomeView.ts">. see https://vuejs.org/api/sfc-script-setup.html#restrictions