Laravel 5.5 Xampp Apache - Data won't insert anymore

I followed this tutorial of creating a simple CRUD app using Vue.js and Laravel and I wanted to enable virtual host, since the tutorial used php artisan. Now that I enabled virtual host on Apache the Add/Create new posts function won't work anymore. Please help and thanks.

Here is what I inserted in the httpd-vhosts.conf:

<VirtualHost *:80>
DocumentRoot "C:\xampp\htdocs\vuecrud\public"
ServerName localhost 
ServerAlias localhost          
ErrorLog "logs/laravel.log"
CustomLog "logs/custom.laravel.log" combined
<Directory "C:\xampp\htdocs\vuecrud\public">
    AllowOverride All
    Order Allow,Deny
    Allow from all
    Require all granted
</Directory>

here is what i added to the hosts file:

127.0.0.1    localhost

here is whats in my .env file:

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:UldJSP/euow13YQMQvrUmtDiE/HB4344EtqfzEobTpI=
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=stack

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=vuecrud
DB_USERNAME=root
DB_PASSWORD=null

BROADCAST_DRIVER=log
CACHE_DRIVER=file
SESSION_DRIVER=file
SESSION_LIFETIME=120
QUEUE_DRIVER=sync

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=mt1

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

here is the add post code:

    <template id="add-post">
  <div>
    <h3>Add new Post</h3>
    <form v-on:submit.prevent = "createPost">
      <div class="form-group">
        <label for="add-title">Title</label>
        <input id="add-title" v-model="post.title" class="form-control" required />
      </div>
      <div class="form-group">
       <label for="add-body">Body</label>
       <textarea class="form-control" rows="10" v-model="post.body"></textarea>
      </div>  
       <button type="submit" class="btn btn-xs btn-primary"> Create Post</button>
       <router-link class="btn btn-xs btn-warning" v-bind:to="'/'">Cancel</router-link>
    </form>
  </div>
</template>

<script>
 export default {
   data: function () {
 return {post: {title: '', body: ''}}
 },
 methods: {
   createPost: function() {
     let uri = 'http://localhost/posts/';
     Axios.post(uri, this.post).then((response) => {
     this.$router.push({name: 'Listposts'})
     })
   }
 }
 }
</script>

via Chebli Mohamed