Language-tools: Confusing / wrong code completion

Describe the bug
I'm experiencing confusing code completion with both plain JS and TS. Not sure if I've set up something wrong.

To Reproduce
see simple setup with a Parent.svelte and a Child.svelte component:

// Parent.svelte
<script>
    import {onMount} from "svelte"
    import Child from "./Child.svelte"

    let child

    onMount(()=> {

    })

</script>

<Child bind:this={child} />`

// Child.svelte
<script>
    export let foo
    export let bar = undefined

    export const baz = () => {
        console.log("executed function 'baz'!")
    }    
</script>

<div>
    foo is: <em>{foo}</em><br/>
    bar is: <em>{bar}</em>
</div>

JS with <script></script>:

• Code completion on the Child component shows bar, baz, foo, ref etc.
  expected: only foo and bar

  • why is ref there, what does it do?
  • I guess $$prop_def, $$slot_def, __sveltets_ensureType, __sveltets_partial are related to svelte2tsx (?)
  • Child / child?
  • onMount?

• bar, baz, foo are all listed as optional (?:)
  expected: bar optional, baz not listed, foo obligatory (see console warning).

• Code completion on child-reference is also confusing me, beside svelte2tsx related stuff etc.:
  foo is listed, although it's not accessible (see console error), baz is not listed.
  expected: foo is not listed, baz is listed

• Although baz is not listed I can call it and it works as expected (see console log)

TS version with <script lang="typescript"></script>:

// Parent.svelte
<script lang="typescript">
    import {onMount} from "svelte"
    import Child from "./Child.svelte"

    let child:Child

    onMount(()=> {

    })

</script>

<Child bind:this={child} />`

// Child.svelte
<script lang="typescript">
    export let foo: number
    export let bar: number = undefined

    export const baz = (): void => {
        console.log("executed function 'baz'!")
    }    
</script>

<div>
    foo is: <em>{foo}</em><br/>
    bar is: <em>{bar}</em>
</div>

• Code completion on the Child component shows bar, baz, foo, ref etc.
  expected: only foo and bar + etc.

• bar, baz, foo are all listed as optional (?:)
  expected: bar optional, baz not listed, foo obligatory (see console warning).

• Code completion on child-reference shows only $$prop_def and $$slot_def

  • After accessing $$prop_def the list contains bar, baz, foo (would expect only baz)
  • When trying to set foo I get "Cannot read ..."-error, but would expect "Props cannot be read directly from the component ..."
  • Calling $$prop_def.baz() doesn't work (see console-error)
  • Calling child.baz() works as expected (see console.log), although it's not listed, but gets marked as an error in VS Code: "Property 'baz' does not exist on type 'Child__SvelteComponent_'. (ts2339)

Conclusion:

Code completion actually seems so confusing / wrong, that I'm not sure if I've maybe configured something wrong? 🤔 Would highly appreciate any hint if assuming so!

System (please complete the following information):

• OS: Windows 10
• IDE: VSCode 1.47.2
• Plugin/Package: Svelte for VSCode 101.2.0

relevant package.json

"rollup": "^2.21.0",
"rollup-plugin-svelte": "^5.2.3",
"@rollup/plugin-commonjs": "^14.0.0",
"@rollup/plugin-node-resolve": "^8.4.0",
"@rollup/plugin-typescript": "^5.0.2",
"svelte": "^3.24.0",
"svelte-preprocess": "^4.0.8",
"tslib": "^2.0.0",
"typescript": "^3.9.7"

tsconfig.json

"compilerOptions": {
        "target": "es2017",
        "strict": false, 
        "moduleResolution": "node",
        "allowJs": false,
        "lib": [
            "es2017", "DOM"
        ],
        "types": [
            "svelte"
        ],
        "baseUrl": "."
    },
    "include": [
        "./src"
      ]
}

Thank you!