Update user profile Vue-Laravel

Simple, instead of using :auth="{{ Auth::user() }}", make sure to remove the dots :, since in this way you will be specifying to html that it authis just one more property of the element inside the DOM; It will also be necessary to transform the user to type JSONwhen passing it to the property:

<profile-component auth="{{ Auth::user()->toJson() }}"></profile-component>

Problem inside Vue component

You will realize that even doing this your component will not work and that is because Vue will interpret the property value authas a string, there are many ways to solve this, I will go for the simplest. In order to solve the property problem, it will be necessary to transform the data at some point in the component's life cycle and add it to a new data, an example could be:

<script>
export default {
  props: ['auth'],
  data() {
    return {
      user: { },
    }
  },
  mounted() {
    this.user = JSON.parse(this.auth);
  },
  methods: {
    editUser() { }
  },
  filters: {
    moment: function(date) {
      return moment(date).format("D [de] MMMM [de] YYYY ");
    }
  }
}
</script>

NOTE: You have to replace all use of authinside useryour template.

<template>
   <div class="row">
     <form  class="form-horizontal form-material">
       <div class="form-group">
         <label class="col-md-12">Nombre</label>
           <div class="col-md-12">
             <input type="text" class="form-control form-control-line"
               v-model="user.name">
             </div>
           </div>
           <div class="form-group">
             <label class="col-md-12">Apellido</label>
               <div class="col-md-12">
                 <input type="text" class="form-control form-control-line"
                   v-model="user.lastname">
               </div>
            </div>
            <div class="form-group">
              <label class="col-sm-12">Genero</label>
              <div class="col-sm-12">
                <select class="form-control form-control-line">
                  <option>Femenino</option>
                  <option>Masculino</option>
                  <option>Otra orientación</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label class="col-md-12">Sobre mi</label>
              <div class="col-md-12">
                <textarea rows="5" class="form-control form-control-line"
                 v-model="user.description">
                </textarea>
              </div>
            </div>
          <div class="col-sm-12">
            <button class="btn btn-success" 
              v-on:click="editUser()">Actualizar
            </button>
          </div>
      </form>
    </div>
</template>

Update information via AJAX request

Considering that you are using Axios, you would have to follow a process similar to the following:

function editUser() {
  // Usar FormData es estrictament necesario cuando se trata de
  // enviar información como imágenes o contenido multimedia, en este
  // caso no es estrictamente necesario ya que no trabajas con contenido
  // multimedia, pero lo dejo para cualquier cambio futuro que puedas hacer.
  let data = new FormData();

  data.append('name', this.user.name);
  data.append('lastname', this.user.lastname);
  data.append('description', this.user.description);
  // ...

  axios.put('/la-url-para-editar', data)
       .then(response => {
          // Aquí pones cualquier operación una vez que el usuario
          // se actualizó exitosamente; un ejemplo, redireccionar a
          // otra página.
       })
       .catch(errors => {
          // Aquí las operaciones si ha ocurrido algún error.
       });
}

Keep in mind for it to axioswork you need to specify the csrf tokenwithin the configurations of axios, if you use Laravel Mix, you will not have any problem since this already includes in the default configuration (within the bootstrap.js file ) the integration of said token.