title: Changing Custom Property on hover || VUEJS
body: <p>Trying to become friends with VUEJS. Got stuck on some simple stuff, couldn't google it. So I'm using MuseUi framework in my App. Well I want to do a simple thing, change the value of the property for each specific element on hover </p>
  
  <pre><code> &lt;mu-paper :zDepth="1" v-on:mouseover=" ???? " class="searchBox"&gt;
  </code></pre>
  
  <p>I need to change:zDepth to 3 for example, on hover of the element. How could I achieve that? </p>
  
  <p>full code snippet </p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
      &lt;div class="column is-one-quarter"&gt;
          &lt;mu-paper :zDepth="paperHover" v-on:mouseover="changePaper" class="searchBox"&gt;
              &lt;mu-text-field fullWidth="true" :hintText="searchHint" v-model="query" class="demo-radio"/&gt;&lt;br/&gt;
                  &lt;mu-radio label="Name" name="group" nativeValue="1" v-model="selected" class="demo-radio"/&gt;
                  &lt;mu-radio label="Manager" name="group" nativeValue="2" v-model="selected" class="demo-radio"/&gt;
                  &lt;mu-radio label="Department" name="group" nativeValue="3" v-model="selected" class="demo-radio"/&gt;
                  &lt;mu-radio label="Stage" name="group" nativeValue="4" v-model="selected" class="demo-radio"/&gt;
                  &lt;mu-radio label="Deadline" name="group" nativeValue="5" v-model="selected" class="demo-radio"/&gt;
                  &lt;mu-radio label="Start Date" name="group" nativeValue="6" v-model="selected" class="demo-radio"/&gt;
          &lt;/mu-paper&gt;
      &lt;/div&gt;
      &lt;div class="column is-one-column"&gt;
          &lt;mu-float-button icon="add" v-on:click="openModal"/&gt;
      &lt;/div&gt;
      &lt;div class="column"&gt;
          &lt;draggable v-model="projects" @start="drag=true" @end="drag=false"&gt;
              &lt;transition-group name="list-complete staggered-fade" tad="ul" :css="false" :before-enter="beforeEnter" :enter="enter" :leave="leave"&gt;
                  &lt;li v-for="(project, index) in projectsComputed"  :key="project.name" :data-index="index" class="column is-one-third list-complete-item"&gt;
                      &lt;mu-paper :zDepth="3"&gt;
                          &lt;mu-icon-button icon="delete" class="delete-button"&gt;&lt;/mu-icon-button&gt;
                          &lt;article class="media"&gt;
                              &lt;div class="media-content"&gt;
                                  &lt;div class="content"&gt;
                                      &lt;div class="project-name has-text-centered"&gt;
                                          &lt;span&gt;{{project.name}}&lt;/span&gt;
                                      &lt;/div&gt;
                                      &lt;mu-badge :content="project.stage.name" primary slot="right"/&gt;
                                      &lt;!--&lt;div class="project-status has-text-centered"&gt;--&gt;
                                          &lt;!--&lt;span&gt;{{project.stage.name}}&lt;/span&gt;--&gt;
                                      &lt;!--&lt;/div&gt;--&gt;
                                      &lt;div class="project-desc-list has-text left"&gt;
                                          &lt;span&gt;Manager: &lt;/span&gt; &lt;span&gt;{{project.manager.name}}&lt;/span&gt;
                                      &lt;/div&gt;
                                      &lt;div class="project-desc-list has-text left"&gt;
                                          &lt;span&gt;Department: &lt;/span&gt; &lt;span&gt;{{project.department.name}}&lt;/span&gt;
                                      &lt;/div&gt;
                                      &lt;div class="project-desc-list has-text left"&gt;
                                          &lt;span&gt;Start Date: &lt;/span&gt; &lt;span&gt;{{project.started_from}}&lt;/span&gt;
                                      &lt;/div&gt;
                                      &lt;div class="project-desc-list has-text left"&gt;
                                          &lt;span&gt;Dealine: &lt;/span&gt; &lt;span&gt;{{project.deadline}}&lt;/span&gt;
                                      &lt;/div&gt;
                                      &lt;p class="project-description"&gt;
                                          {{project.description}}
                                      &lt;/p&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/article&gt;
                      &lt;/mu-paper&gt;
                  &lt;/li&gt;
              &lt;/transition-group&gt;
          &lt;/draggable&gt;
      &lt;/div&gt;
      &lt;div id="modal-ter"  :class="[isActive ? activeClass : '', modal]"&gt;
          &lt;div class="modal-background" v-on:click="openModal"&gt;&lt;/div&gt;
          &lt;div class="modal-card"&gt;
              &lt;header class="modal-card-head"&gt;
                  &lt;p class="modal-card-title"&gt;Add New Project&lt;/p&gt;
                  &lt;button v-on:click="openModal" class="delete"&gt;&lt;/button&gt;
              &lt;/header&gt;
              &lt;section class="modal-card-body"&gt;
                  &lt;div class="column is-one-third"&gt;
                      &lt;div class="field"&gt;
                          &lt;label class="label"&gt;Project Name&lt;/label&gt;
                          &lt;p class="control"&gt;
                              &lt;input class="input" v-model="newProject.name" type="text" placeholder="Text input"&gt;
                          &lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="column is-one-third"&gt;
                      &lt;div class="field"&gt;
                          &lt;label class="label"&gt;Project Description&lt;/label&gt;
                          &lt;p class="control"&gt;
                              &lt;input class="input" v-model="newProject.description" type="text" placeholder="Text input"&gt;
                          &lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="column is-one-third"&gt;
                      &lt;div class="field"&gt;
                          &lt;label class="label"&gt;Start Date&lt;/label&gt;
                          &lt;p class="control"&gt;
                              &lt;input class="input" v-model="newProject.started_from" type="text" placeholder="Text input"&gt;
                          &lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="column is-one-third"&gt;
                      &lt;div class="field"&gt;
                          &lt;label class="label"&gt;Deadline&lt;/label&gt;
                          &lt;p class="control"&gt;
                              &lt;input class="input" v-model="newProject.deadline" type="text" placeholder="Text input"&gt;
                          &lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="column is-one-third"&gt;
                      &lt;div class="field"&gt;
                          &lt;label class="label"&gt;Manager&lt;/label&gt;
                          &lt;p class="control"&gt;
                              &lt;input class="input" v-model="newProject.manager.name" type="text" placeholder="Text input"&gt;
                          &lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="column is-one-third"&gt;
                      &lt;div class="field"&gt;
                          &lt;label class="label"&gt;Department&lt;/label&gt;
                          &lt;p class="control"&gt;
                              &lt;input class="input" v-model="newProject.department.name" type="text" placeholder="Text input"&gt;
                          &lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="column is-one-third"&gt;
                      &lt;div class="field"&gt;
                          &lt;label class="label"&gt;Stage&lt;/label&gt;
                          &lt;p class="control"&gt;
                              &lt;input class="input" type="text" v-model="newProject.stage.name" placeholder="Text input"&gt;
                          &lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/section&gt;
              &lt;footer class="modal-card-foot"&gt;
                  &lt;a v-on:click="createProject" class="button is-success"&gt;Save changes&lt;/a&gt;
                  &lt;a class="button"&gt;Cancel&lt;/a&gt;
              &lt;/footer&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  &lt;style scoped&gt;
      .demo-radio {
          min-width: 8em;
      }
      .searchBox {
          padding: 2em;
      }
      .project-status {
          position: absolute;
          top: 0.3em;
          left: 0.3em;
          background-color: #ffdb57;
          padding: 0.2em;
          padding-left: 0.5em;
          padding-right: 0.5em;
          border-radius: 0.3em;
      }
      .project-name {
          font-weight: 900;
      }
      .project-description {
          margin-top: 0.5em;
          padding-top: 1em;
          border-top: 1px solid lightgrey;
      }
      .project-desc-list span:first-of-type{
          font-weight: 900;
      }
      .box {
          position: relative;
      }
      .project-name {
          text-align: center;
      }
      .delete-button {
          background-color: rgba(255, 8, 8, 0.4);
          transition: all .25s ease-in;
          float: right;
          position: absolute;
          right: 0.3em;
          top: 0.3em;
      }
  
      .delete-button:hover, .delete-button:focus{
          background-color: rgba(255, 0, 0, 0.68);
      }
  
      .column{
          display: inline-block;
          padding: 1em;
      }
  
      .list-complete-item {
          transition: all 1s;
      }
  
      .list-complete-enter, .list-complete-leave-active {
          opacity: 0;
      }
  &lt;/style&gt;
  &lt;script &gt;
      export default {
          data(){
              return {
                  loading: false,
                  isActive: false,
                  paperHover: 3,
                  modal: 'modal',
                  searchHint: 'Search by ...',
                  activeClass: 'is-active',
                  query: "",
                  selected: "",
                  projects: [],
                  newProject: {
                      name: '',
                      description: '',
                      started_from: '',
                      deadline: '',
                      manager: {
                          name: ''
                      },
                      department: {
                          name: ''
                      },
                      stage: {
                          name: ''
                      }
                  },
              }
          },
          options: {
              segmentShowStroke: false
          },
          mounted() {
              this.getData();
          },
          computed: {
              projectsComputed: function () {
                 var vm = this;
                 if(this.selected == '1' || this.selected == ""){
                     this.searchHint = "Search by Name";
                     return this.projects.filter(function (project) {
                         return project.name.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1;
                     })
                 }else if(this.selected == '2'){
                     this.searchHint = "Search by Manager";
                     return this.projects.filter(function (project) {
                         return project.manager.name.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1;
                     })
                 }else if(this.selected == '3'){
                     this.searchHint = "Search by Department";
                     return this.projects.filter(function (project) {
                         return project.department.name.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1;
                     })
                 }else if(this.selected == '4'){
                     this.searchHint = "Search by Stage";
                     return this.projects.filter(function (project) {
                         return project.stage.name.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1;
                     })
                 }else if(this.selected == '5'){
                     this.searchHint = "Search by Deadline";
                     return this.projects.filter(function (project) {
                         return project.deadline.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1;
                     })
                 }else if(this.selected == '6'){
                     this.searchHint = "Search by Start Date";
                     return this.projects.filter(function (project) {
                         return project.started_from.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1;
                     })
                 }
  
              }
          },
          methods: {
              changePaper: function () {
                this.paperHover = 6 ;
              },
              beforeEnter: function (el) {
                  el.style.opacity = 0
                  el.style.height = 0
              },
              enter: function (el, done) {
                  var delay = el.dataset.index * 150
                  setTimeout(function () {
                      Velocity(
                          el,
                          { opacity: 1, height: '1.6em' },
                          { complete: done }
                      )
                  }, delay)
              },
              leave: function (el, done) {
                  var delay = el.dataset.index * 150
                  setTimeout(function () {
                      Velocity(
                          el,
                          { opacity: 0, height: 0 },
                          { complete: done }
                      )
                  }, delay)
              },
              getData() {
                  this.loading = true;
                  axios.get('/project/').then(({data}) =&gt; this.projects = data).then(() =&gt; this.loading = false)
              },
              openModal: function(){
                  if(this.isActive){
                      this.isActive = false;
                  }else {
                      this.isActive = true;
                  }
              },
              createProject() {
                  axios.post('project/store', this.newProject)
              }
          }
      }
  &lt;/script&gt;
  enter code here
  </code></pre>