Vue 3 phaser and spine.js - Uncaught TypeError: Cannot read properties of undefined (reading 'data')

I’m trying to build a game with vue3 js phaser and spine . I’ve used the official template from phaser with vue and installed phaser-spine and import it . Official Phaser 3 and Vue 3 Template - Phaser

this is the main.js file :

import { Lootbox } from './scenes/Lootbox';
import Phaser from 'phaser';
import {SpinePlugin} from "@esotericsoftware/spine-phaser"

// Find out more information about the Game Config at:
const config = {
    type: Phaser.AUTO,
    width: 1024,
    height: 768,
    parent: 'game-container',
    backgroundColor: '#028af8',
    plugins: {
        scene: [
           { key: 'spine.SpinePlugin', plugin: SpinePlugin, mapping: 'spine' }
    scene: [game]

const StartGame = (parent) => {

    return new Phaser.Game({ ...config, parent });

export default StartGame;

and this is the scene file :

import Phaser from 'phaser';

export class Lootbox extends Phaser.Scene {
    constructor() {

    preload() {
        this.load.spineBinary("man-data", "assets/man.skel");
        this.load.spineAtlas("man-atlas", "assets/man.atlas");
        console.log("scene loaded ")

    create() {
        const manAnimation = this.add.spine(333, 333, 'man-data', "idle", true);
        manAnimation.animationState.setAnimation(0, "in", true)



Now i see my atlas an skel file loaded in the network tab and the png but i keep getting this error Uncaught TypeError: Cannot read properties of undefined (reading ‘data’)

on this line

        const lootbox = this.add.spine(333, 333, 'lootbox-data', "idle", true);

I’ve tried using vanilla js and it works there, but i want to make the project with vuejs 3 . So the assets are ok and working when using a vanilla js project .

From what i understand i try to initiate spine to early?

Where is this, and where does lootbox-data get loaded?