Unresolved variable tooltip for vue + typescript tamplate?

Question

phpstorm

PhPStorm IDE
template.html

<em @click="toggleMenu"
            class="fa far  fa-bars fa-3x opacity-4 transition-all-3 hover-opacity-1 text-pink cursor-pointer nav_menu-toggle-btn"
            v-if="true === isMenuClosed"
        ></em>

Menu.ts

'use strict';

import {Component, Vue} from "vue-property-decorator";
import * as Template    from './_template.html?style=./_styles.scss'

@Template
@Component<Menu>
export default class Menu extends Vue {
    private isMenuClosed: boolean = true;

    private toggleMenu(): void {
        this.isMenuClosed = !this.isMenuClosed;
    }
};

Unresolved variable toggleMenu
Unresolved variable isMenuClosed

The only option is to use through
this.toggleMenu()
although before when there was an extension > vue warning was missing

Answer 1

If PHPStorm writes this to you, accept it. Of course, I will not check this, but most likely PHPStorm does not know what to do with vue syntax in html and with @Template, because this is not an official or even common way to work with Vue templates.
Well, or you can roll a feature request into the storm bug tracker.
The official way to split the SFC into separate files (although the very idea of ​​this is disgusting to me personally) is to refer to the script and styles from the .vue file:

<template>
  <em @click="toggleMenu"
            class="fa far  fa-bars fa-3x opacity-4 transition-all-3 hover-opacity-1 text-pink cursor-pointer nav_menu-toggle-btn"
            v-if="true === isMenuClosed"
  />
</template>
<script lang="ts" src="./_script.ts"></script>
<style lang="sass" src="./_styles.scss"></style>