Why my custom search filter in vue.js can't work?

Question

I can't understand where is my fault . I try to make a custom search filter.I make a search box Where I search anythings but when it is matching in my list it gives me matching output only .But its not working .It's not look like dynamic.I am using vue 2.Hopefully I forget to add something in my computed property

  <template>
      <div class ="container">
        <div class="new">
          <form >
          <h1><label>Enter country name:</label></h1>
          <input type="text" name="name" class="form-control" v-model="search">
          </form>
    
        </div>
        <div class='new'>
          <ul>
            <li v-for="country in countries">{{country.name}} 
    
              <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere dignissimos architecto quia, quisquam ad similique corporis. Laborum, error id qui consequuntur facilis est delectus velit vel ea nisi repudiandae doloribus. </p>
              
            </li>
          </ul>
        </div>
        
      </div >
    </template>
    
    <script>
    export default {
      data(){
        return { 
          countries:[
           
           {name:'AMERICA'},
           {name:'INDIA'},
           {name:'PAKISTAN'},
           {name:'SRILANKA'},
    
          ],
          search:'',
        
         }
      },
      computed: { 
        newfuntion(){
          return this.countries.filter((funtion)=>{
            return funtion.match(this.search)
          });
        }
       }
    };
    </script>

Answer 1

It looks like you are not using your computed property in your v-for.

Try changing it to this: v-for="country in newfuntion"