VS Code with Volar extension shows error, but Vue3 app is working as expected

Question

I started a small side project (homage to the classic Snake game) today and everything is working fine, but VS Code shows two errors in a Vue component and it seems it is using an outdated version of imported classes and components.

Initially I started with a class, but later I added an interface that really only exposes public properties (through getter and setter) and methods. But the component using this class still thinks the class is required as a paramter and complains that the private properties are not available on the type.

I am not sure if the error comes from VS Code itself or the Volar extension which is recommended for Vue3 and Typescript.

The code is available as a public github repo: https://github.com/onyx-blackbird/vue-snake/blob/master/src/components/GameGrid.vue The lines that are red are: #23 and #122 at the time of writing. If I update the file in the meantime here the two lines (in both cases snake is of ISnake and the method and component both expect ISnake):

const { food, placeFood } = useFood(maxX, maxY, snake);  

<SnakeFigure :snake="snake" :is-game-over="isGameOver"></SnakeFigure>

Here the referenced class and interface: https://github.com/onyx-blackbird/vue-snake/blob/master/src/model/Snake.ts

Answer 1

It might be that you have 2 plugins enabled at the same time - volar and vetur. Vetur must be turned off.