Expression error in Vue.js with filterBy

This is the snippet of code that has a problem;

<div class="well">
            <input type="search" v-model="MySearch" class="form-control" placeholder="Search"/>
        </div>

        <div class="row">
        <table class="table">
            <thead>
              <tr>
                <th>Nome</th>
                <th>Altura</th>
                <th>Peso</th>
                <th>Cor dos Olhos</th>
                <th>Genero</th>
                <th>Cor dos cabelos</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="bancodedado in bancodedados | filterBy MySearch ">
                <td>{{ bancodedado.name }}</td>
                <td>{{ bancodedado.height }}</td>
                <td>{{ bancodedado.mass }}</td>
                <td>{{ bancodedado.eye_color }}</td>
                <td>{{ bancodedado.gender }}</td>
                <td>{{ bancodedado.hair_color }}</td>
              </tr>
            </tbody>
          </table>
    </div>

This is the Javascript code;

new Vue({
  el: '#app',
  data: {
    bancodedados: [],
    MySearch:''

  },
  methods: {

  },
  created: function() {
    var self = this;
    self.$http.get('https://swapi.co/api/people/?format=json').then(function(response) {
      self.bancodedados = response.body.results;
    });
  }
});

I'm performing as in the vue.js document

Documentation

but it is generating me an error in the navigation console as you can see in the message below;

  [Vue warn]: Error compiling template:

<div class="container" id="app">
    <div class="row">
        <h1>Book</h1>
    </div>
        <div class="well">
            <input type="search" v-model="MySearch" class="form-control" placeholder="Search">
        </div>

        <div class="row">
        <table class="table">
            <thead>
              <tr>
                <th>Nome</th>
                <th>Altura</th>
                <th>Peso</th>
                <th>Cor dos Olhos</th>
                <th>Genero</th>
                <th>Cor dos cabelos</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="bancodedado in bancodedados | filterBy MySearch ">
                <td>{{ bancodedado.name }}</td>
                <td>{{ bancodedado.height }}</td>
                <td>{{ bancodedado.mass }}</td>
                <td>{{ bancodedado.eye_color }}</td>
                <td>{{ bancodedado.gender }}</td>
                <td>{{ bancodedado.hair_color }}</td>
              </tr>
            </tbody>
          </table>
    </div>

</div>

- invalid expression: v-for="bancodedado in bancodedados | filterBy MySearch "


(found in <Root>)

In other words, he is saying he did not find the MySearch variable

I accept suggestions!

===================================================== ====================

You may realize that it is the same problem, and it has been resolved. Mine was to work.

CLICK HERE