"@" is no longer rewriting suffixes to src-prefixed paths only in vue.js 3 html templates (but still ok in TypeScript files)

Question

I created a new project Vue.js 3 + TypeScript but it seems for some reason that the @ no longer works in Vue templates... I've already checked a few answers but nothing has worked out so far.

What I've checked till now:

• ES6 import using at ('@') sign in path in a vue.js project using Webpack
• https://forum.vuejs.org/t/vue-cli-3-project-dynamic-src-in-image-path-not-working/55375
• https://forum.vuejs.org/t/solved-error-trying-to-get-local-images-in-vue-files-with-my-own-webpack-config/82137/2
• https://forum.vuejs.org/t/how-to-import-and-use-image-in-a-vue-single-file-component/22664
• Vue cli 3 project ,dynamic src in image path not working

package.json:

{
  "name": "vue-typescript-decorators",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@mdi/font": "5.9.55",
    "core-js": "^3.6.5",
    "roboto-fontface": "*",
    "vue": "^3.0.0",
    "vue-class-component": "^8.0.0-0",
    "vue-property-decorator": "^9.1.2",
    "vue-router": "^4.0.0-0",
    "vuetify": "^3.0.0-alpha.2",
    "vuex": "^4.0.0-0",
    "vuex-class": "^0.3.2",
    "vuex-class-modules": "^1.2.0",
    "vuex-composition-helpers": "^1.0.23"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^7.0.0-0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~4.1.5",
    "vue-cli-plugin-vuetify": "~2.3.1"
  }
}

tsconfig.json:

{
  "compilerOptions": {
    "allowJs": true,
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

main.ts:

import { createApp } from "vue";
import vuetify from "@/vuetify";
import App from "@/App.vue";
import router from "@/router";
import store from "@/store";
import "@/styles/app.scss";

createApp(App)
  .use(vuetify)
  .use(store)
  .use(router)
  .mount("#app");

App.vue:

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

And where the issue occurs Home.vue:

<template>
  <div class="home">
    <img alt="Vue logo" src="@/assets/logo.png" />
    <Counter msg="Counter" />
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
import Counter from "@/components/Counter.vue";

@Options({
  name: "Home",
  components: {
    HelloWorld,
    Counter
  }
})
export default class Home extends Vue {}
</script>

The image appears missing and when looking at the source, turns out there is no rewrite following @ character in the src attribute of the img tag, any idea about why this is the case?

Note: I've also created a GitHub repository to reproduce the issue:

npm install
npm run serve

[EDIT]

I have a working solution (here)[https://github.com/mary-perret-1986/vue-issue-reproduction/tree/feature/solution] but need to find what has changed between the two branches.