Why is Volar LSP inactive in Vue script sections and not previewing child components in Neovim?

I recently started working with the vue3 framework using Neovim 10.0 and decided to integrate an LSP server into my workflow. I set up my configuration as shown below, which works perfectly for the template and style sections, providing completion and suggestions. However, the LSP remains inactive in the script section and I don't get a preview for imported child templates (e.g., when using RouterView in the parent template).

Below is my current configuration:

LUACopied
local lspconfig = require "lspconfig"
local mason = require "mason"
local mason_lspconfig = require "mason-lspconfig"
local mason_registry = require "mason-registry"

mason.setup {}
mason_lspconfig.setup {
    ensure_installed = {
        "ts_ls",
        "volar",
    },
    handler = {
        function(server)
            lspconfig[server].setup {}
        end,
        volar = function()
            lspconfig.volar.setup {}
        end,
        ts_ls = function()
            local vue_typescript_server_path = mason_registry.get_package("vue-language-server"):get_install_path()
                .. "/node_modules/@vue/language-server"

            lspconfig.ts_ls.setup {
                init_options = {
                    plugins = {
                        {
                            name = "@vue/typescript-plugin",
                            location = vue_typescript_server_path,
                            languages = { "vue", "javascript", "typescript" },
                        },
                    },
                },
                filetypes = {
                    "javascript",
                    "javascript.jsx",
                    "javascriptreact",
                    "typescript",
                    "typescript.tsx",
                    "typescriptreact",
                    "vue",
                },
            }
        end,
    },
}

local servers = {
    "cssls",
    "html",
    "jsonls",
    "marksman",
    "ts_ls", -- typescript-language-server
    "volar", -- vue-language-server
}

for _, lsp in ipairs(servers) do
    local config = {
        on_attach = on_attach,
        on_init = on_init,
        capabilities = capabilities,
    }

    lspconfig[lsp].setup(config)
end

In the script section of my Vue file, the LSP is inactive:

HTMLCopied
// inside this section am on my own
<script setup lang="ts">
import { ref } from "vue"
import { RouterView } from "vue-router" // don't have preview for RouterView token

let something = ref("data")
</script>

Additionally, my main.ts file shows an error when importing the main Vue template, though it still compiles and launches the app:

TYPESCRIPTCopied
import { createApp } from 'vue';
import App from './App.vue'; // Cannot find module './App.vue' or its corresponding type declarations.
const app = createApp(App);

• I expect the LSP to activate in the script section.
• I want to have a preview for imported templates.

Any insights on resolving these issues?