I'm getting an Not Found error while importing an image to use it as a texture in a Texture component from Trois.js module.

I created a project using Vue Cli and imported Trois.js to a component and there I started playing with a cube example. Here's the code:

<template>
  <Renderer ref="renderer" :resize="true" orbit-ctrl>
    <Camera ref="camera" :position="{ z: 10 }" />
    <Scene ref="scene" background="#cdcdcd">
      <PointLight ref="light" :position="{ y: 50, z: 50 }" />
      <Box ref="box" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }">
        <PhongMaterial>
          <Texture src="@/assets/logo.png" />
        </PhongMaterial>
      </Box>
    </Scene>
  </Renderer>
</template>

<script>
export default {
  mounted() {},
};
</script>

<style scoped></style>

I tried to use each material available (BasicMaterial, LambertMaterial, etc), but the error is not related to this.

This is the image while commenting the Texture line: withoutTexture

And this one while uncommented: withTexture

The work directory looks like this: workDirectory

I also tried changing the type of path, using relative, absolute... It didn't change anything.