How can I correctly use Lumen with Vue's Webpack template?

How can I correctly use Lumen with Vue's Webpack template? https://github.com/vuejs-templates/webpack-simple I would like to create a small SPA and I chose Lumen because I have some experience with Laravel and I have read that it can be set to run on shared hosting.

These are my steps

1. Install Lumen:

     lumen new blog
     composer install
   

2. Install Vue template in root of a project:

    vue init webpack-simple .
    npm install
   

3. In routes/web.php place:

    // This would be for starting app
    $router->get('/', function () use ($router) {
        return view('main');
    });
   
    // This is a short example for api response
    $router->get('/api/v1/tasks', function () use ($router) {
        return 'a list of tasks';
    });
   

1. Place in resources/views/main.php

2. Change paths in webpack.config.js

   module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './public'),
                // I am not sure what this does?
        publicPath: '/dist/',
        filename: 'build.js'
    },
   

3. install axios:

    npm install axios --save
   

4. in /resources/js/src/App.vue place

    created() {
   
        axios.get('http://localhost/lumen/public/api/v1/tasks')
        .then(function (response) {
            console.log(response.data);
        })
        .catch(function (error) {
            console.log(error);
        });
   
    }
   

That code works if I do npm run build, it will fetch "A list of tasks", but it doesn't on localhost because "No 'Access-Control-Allow-Origin' header is present on the requested resource". Since localhost starts from index.html I can't set the following and it doesn't work

 <?php header('Access-Control-Allow-Origin: *'); ?>

My questions are:

1. Are my steps ok?
2. How to set app so that I can correctly do API requests, both in "npm run dev" mode which has hot reload and also so that ending product works after "npm run build"?