V-model is not working in Vue 3 when using SFC with vue loader

Question

v-model works fine when using string templates using template: '<div>....' but doesn't work when using SFC components using <template> element. I am using a custom configuration with webpack to be able to integrate it with Django.

Webpack Config :

const path = require('path');
var webpack = require("webpack");
var BundleTracker = require('webpack-bundle-tracker');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");

const entries = {
  home:'./main/static/main/js/pages/home.js',
  offer:'./main/static/main/js/pages/offer.js',
  profile:'./main/static/main/js/pages/profile.js',
  request:'./main/static/main/js/pages/request.js',
  navbar:'./main/static/main/js/pages/navbar.js',
}

module.exports = {
  entry:entries,  // path to our input file
  output: {
    clean: false,
    filename: '[name].[contenthash].js',  // output bundle file name
    chunkFilename: '[name].[contenthash].js',
    path: path.resolve(__dirname, './main/static/main/builds'),  // path to our Django static directory
  },
  resolve: {
    alias: {
      vue: 'vue/dist/vue.js',
      '@':path.resolve(__dirname, './main/static/main/js'),
    },
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.ENV': JSON.stringify(process.env.ENV),
    }),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    }),
    new BundleTracker({
      path: __dirname,
      filename: './main/static/main/builds/webpack-stats.json',
    }),
    new MiniCssExtractPlugin(),
    new VueLoaderPlugin()

  ],

  optimization: {
    minimizer:[
      new CssMinimizerPlugin(),
      new TerserPlugin(),
      // new CompressionPlugin()
    ],
    minimize: true,
},
  module: {
    rules: [
      {
        test:/\.vue$/,
        loader: 'vue-loader'
      },

      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options:{
          cacheDirectory: true
        }
      },
      {
        test: /\.(png|svg|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use:[
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: () => [
                  require('autoprefixer')
                ]
              }
            }
          },
          {
            loader: 'sass-loader'
          }
        ],
        // use: [
        //   {
        //     loader: MiniCssExtractPlugin.loader,
        //   },
        //   "style-loader",
        //   "css-loader",
        //   "sass-loader",
        //   "postcss-loader",
        // ],

      },
    ]
  },
  resolveLoader: {
    modules: [
        path.join(__dirname,'node_modules')
    ]
  },
  resolve: {
      modules: [
          path.join(__dirname, 'node_modules')
      ]
    }
};

package.json :

{
  "name": "bricoram",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack -w --mode=development",
    "build": "webpack --mode=production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.6",
    "@babel/preset-react": "^7.14.5",
    "@vue/compiler-sfc": "^3.2.41",
    "autoprefixer": "^10.4.13",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.7.1",
    "file-loader": "^6.2.0",
    "install": "^0.13.0",
    "js-cookie": "^3.0.1",
    "mini-css-extract-plugin": "^2.6.1",
    "npm": "^8.5.2",
    "postcss": "^8.4.7",
    "postcss-loader": "^6.2.1",
    "requirejs": "^2.3.6",
    "sass": "^1.39.2",
    "sass-loader": "^12.1.0",
    "style-loader": "^3.2.1",
    "toastr": "^2.1.4",
    "url-loader": "^4.1.1",
    "v-viewer": "^3.0.11",
    "vue-loader": "^17.0.0",
    "vue-multiselect": "^2.1.6",
    "vue-style-loader": "^4.1.3",
    "vue-template-compiler": "^2.7.13",
    "vue-toast-notification": "^0.6.3",
    "webpack": "^5.52.1",
    "webpack-bundle-tracker": "^1.6.0",
    "webpack-cli": "^4.8.0"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.0.0-beta2",
    "@gitlab/svgs": "^1.218.0",
    "@popperjs/core": "^2.11.6",
    "@sentry/browser": "^6.18.2",
    "@sentry/tracing": "^6.18.2",
    "@tarekraafat/autocomplete.js": "^10.2.7",
    "axios": "^0.27.2",
    "bootstrap": "^5.2.2",
    "compression-webpack-plugin": "^10.0.0",
    "css-minimizer-webpack-plugin": "^4.2.2",
    "glob": "^8.0.3",
    "jquery": "^3.6.0",
    "jquery-ui": "^1.13.0",
    "jquery-ui-bundle": "^1.12.1-migrate",
    "just-detect-adblock": "^1.1.0",
    "moment": "^2.29.1",
    "pikaday": "^1.8.2",
    "terser-webpack-plugin": "^5.3.6",
    "viewerjs": "^1.10.1",
    "vue": "^3.2.41",
    "vue-template-loader": "^1.1.0",
    "vue3-sfc-loader": "^0.8.4",
    "webpack-jquery-ui": "^2.0.1"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}