Background
Creating an inline autocomplete text field component using Vuetify3. The point of the input is to allow user to query and ask inference about their uploaded tabular file using an LLM of choice. To allow column header completion it will behave like intellisense in IDEs. The application uses v-text-field component from Vuetify3 as the input field. The column headers will be sent from the Streamlit app to the node server to autocomplete suggestions from the list, and the server will return a user prompt to the front-end application, forwarding it to the LLM API. I have just started working on this component, so the application is just bare minimum. For now it just has an input field with random words to suggest from, and the Streamlit front-end is supposed to render it as a custom component.
I’m using: Vue 3.2 | Vuetify 3.0 | streamlit-component-lib 2.0 | vite 4.2 | Windows 11 | Firefox | Edge
The Problem
I have created my Vuetify app, and it is working fine as a standalone front-end on my localhost. The Streamlit application also works fine on its own, but when I instantiate the custom Vue component and use it in my Python code it does not get rendered to the browser. There is no error displayed, just that vite [connected]. It would not be right to paste the whole code here, so instead here is my Github repository link where you can find the Vuetify app inside vuetify-project/src/App.vue and __init__.py in the main folder is the Streamlit application. I have tried numerous solution (any that I could find) to get it to work, but to no avail I can’t seem to understand the problem. I believe it is something related to how I have initialized my Vuetify app and declared plus instantiated my app in Streamlit because these two applications are working just fine independently.
What I have already tried
Following great support from the Streamlit community I resolved many issues like Streamlit component ready message and following streamlit component template vue repository, but my file and folder structure differs heavily and I thought I’d keep it simple with the SPA. Tested on both npm development server and a built directory. Tried soo many AI generated code template to just get it to work 
Need help!
I’ve always used npm create vuetify to initialize my projects and continue with the scaffolding. Is their something I’m missing to link these 2 components together? Can it not work with this structure? Do I have to just clone the vue template repo and work with it?