I am trying to import a gltf file in vue.js using babylon.js and add 3 dimensional view to the webpage. I can't figure out how to do that and the documentation online is pretty vague as well. Here's what I tried: This is what I put in Hello.vue file

<div>
<h1> Hello </h1>
<Scene>
  <Box :position="[0, 0, 5]"></Box>
</Scene>
</div>
</template>

<script src = "./Hello.js">
</script>

This is what I put in Hello.js file

import vb from 'vue-babylonjs';
import Hello from './Hello.vue';

Vue.use(vb);

new Vue({
  components: { Hello },
  render: c => c('Hello'),
}).$mount('#app');


var delayCreateScene = function () {
    // Create a scene.
    var scene = new BABYLON.Scene(engine);

    // Create a default skybox with an environment.
    var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("../assets/magic_book_of_eden/textures/material_0_baseColor.png", scene);
    var currentSkybox = scene.createDefaultSkybox(hdrTexture, true);

    // Append glTF model to scene.
    BABYLON.SceneLoader.Append("../assets/magic_book_of_eden/", "scene.gltf", scene, function (scene) {
        // Create a default arc rotate camera and light.
        scene.createDefaultCameraOrLight(true, true, true);

        // The default camera looks at the back of the asset.
        // Rotate the camera by 180 degrees to the front of the asset.
        scene.activeCamera.alpha += Math.PI;
    });

    return scene;
};

If possible, could someone explain using an example how that could be done? I am getting the gltf model from sketchfab. Thank you!

Output: