Removing a Vue custom filter on mouseover

I would like to remove a truncate filter on mouseover using VueJS 2. Here is my filter in the template:

<div class="eng" @mouseover="showAll">{{ word.english | truncate }}</div>

And here is the filter itself:

filters: {
    truncate: function(value) {
      let length = 50;
      if (value.length <= length) {
        return value;
      } else {
        return value.substring(0, length) + '...';
      }
    }
 },

Is there a way to remove the filter on the mouseover event so that the div is not truncated anymore? Thanks!

Edit: The showAll() function is where I thought I would remove it. I tried a couple ways to remove the filter such as:

showAll(){
  console.log('being mousedover');
  this.truncate = false
},

and:

showAll(){
  console.log('being mousedover');
  !this.truncate
}

but this is where I am lost...