Implementation of vue into existing grunt app

I have this application that via grunt runs a few tasks that return scripts and places them on a specific folder. I now want to add a task that runs and compile a vue file and returns the result script in the same destination folder. I have tried to follow this guide -> ‘https://gregtyler.co.uk/blog/vuejs-browserify-grunt?fbclid=IwAR3T_r07EFQywvZJYpBMAmaVebRdN2kHq29uDYy4KV45EGcfCvrAm6FnFg8’

But the end results runs the task but the return script is not generated and also the tasks return message is non existing. It only says “done”

se result here

This is my grunt file. The app uses the plugin ‘load-grunt-config’ to breakup my tasks per a file in ‘grunt’ folder.

/*global module, require*/
module.exports = function(grunt) {
// Get the version of the component from the package.json file.
var package = require('./package.json');
var componentVersion = package.version;
var componentName = package.name;

require('load-grunt-config')(grunt, {
    config: {
        // When changing version, don't forget to change version in the js too (the version number sent to analytics)!
        componentVersion: componentVersion,
        componentName: componentName,
        componentPath: 'dist/resources/'
    }
});
};

This is the file in grunt folder. The file is equivalent to my new vue-task

module.exports = {
browserify: {
    bundle: {
      src: './js/index.js',
      dest: '<%= componentPath %>/<%= componentName %>.<%= componentVersion %>-new.min.js'
    },
    options: {
      browserifyOptions: {
        debug: true
      },
      transform: [
        ['vueify']
      ]
    }
}
}

my package.json

{
  "name": "******",
  "version": "1.2.8",
  "browser": {
    "vue": "vue/dist/vue.common.js"
  },
  "dependencies": {
    "angular": "1.6.4",
    "browserify": "^17.0.0",
    "vue": "^2.6.14",
  },
   "devDependencies": {
    "copyfiles": "1.2.0",
    "grunt": "^1.4.1",
    "grunt-browserify": "^6.0.0",
    "grunt-contrib-less": "1.3.0",
    "grunt-contrib-requirejs": "1.0.0",
    "load-grunt-config": "0.19.2",
    "npm-html2js": "^0.1.8",
    "rimraf": "2.5.4",
    "vueify": "^9.4.1"
   },
  "scripts": {
    "build": "npm run clean && npm run html2js && npm run build:js && npm run copy:mgnl && npm run copy:assets && node node_scripts/addVersion.js && rimraf build && npm run compress",
"build:dev": "npm run clean && npm run html2js && npm run build:jsdev && npm run copy:mgnl && npm run copy:assets && node node_scripts/addVersion.js && rimraf build",
"clean": "rimraf dist && rimraf build && mkdir build && mkdir dist && mkdir dist/stores-and-retailers",
"html2js": "npm-html2js -i 'js/*.html' -o 'build/templates.js'",
"build:js": "grunt build",
"build:jsdev": "grunt build:dev",
"compress": "tar -C dist -zcf dist/stores-and-retailers.tar.gz stores-and-retailers",
"copy:mgnl": "copyfiles -u 1 'mgnl/**/*' dist/stores-and-retailers",
"copy:assets": "copyfiles -u 1 'assets/**/*' dist/stores-and-retailers/assets/",
"deploy-build": "npm run build",
"deploy-build:dev": "npm run build:dev",
   }
}

index.js file

const Vue = require('vue');

 import StoresAndRetailersMap from './components/StoresAndRetailersMap.vue'

 new Vue({
   el: '#storesAndRetailers',
   render: (createElement) => createElement(StoresAndRetailersMap)
 });

this is the vue component that i would like to compile and use

<template>
<div>
    <p>
        {{ msg }}
    </p>
</div>
  </template>
 <script>
        export default {
name: 'StoresAndRetailersMap',
props:{

},
data(){
    return {
        msg: "hello world"
    }
},
methods:{

},
created(){
}
 }