[Vuejs]-Run function only when data changes

Vue actually has something that may help you here. Vue has a looseEqual function used internally. It is exported as _q and can be used as this._q().

You can leverage it to just update your property when the fetched data is different from what you already have. See demo below.

new Vue({
  el: '#app',
  data: {
    people: []
  },
  methods: {
  	async fetchPeople() {
    	let response = await axios.get('https://jsonplaceholder.typicode.com/users');
      if (this._q(this.people, response.data)) {
        console.log("data didn't change, not updating");
        return;
      }
      console.log("data changed, updating");
      this.people = response.data;
    }
  }
})

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
  <button @click="fetchPeople">Fetch People</button>
  <ul>
    <li v-for="p in people">{{ p.name }}</li>
  </ul>
</div>

The drawback is that it is an internal function (the _ prefix is for that) so it may change in the future. Its implementation used to be

function looseEqual(o1, o2) {
    return JSON.stringify(o1) === JSON.stringify(o2);
}

So you can always fall back for that.

Based off your explanation and the naming conventions used in your code snippet I do have some fundamental suggestions that may, or may not, be helpful.

If your filterPeople() function is primarily concerned with filtering and updating your view, then you might be approaching this the wrong way.

Without knowing what the filterPeople() function actually does I can only suggest that if you are actually running some type of filter, then you should actually define a vue.js filter. Let’s say you want to run the filterPeople filter on the list of returned participants.

Vue.filter('filterPeople', function (newer, older) {
   if (older == newer) {
       return older
    }

    // Otherwise filter, and return 'newer' 

 });

var endpoint  = '/users/participants';

new Vue ({
    el: '#app',
    data: {
        participants: null,
        previous: null
    },
    methods:{
        getParticipants: function(){
               this.$http.get(endpoint).then(function(response){
                   this.previous = this.particpants;
                   this.participants = response.data;
                }, 
                function(error){
                  console.log(error.statusText);
                }
              })
          },
          mounted: function () {
            this.getParticipants();
         }
  });

Then your html would look something like the following.

<div id="app">
     {participants | filterPeople(previous)}
<div>

That would be my recommended way (is psuedo code, but you get the picture). Another way would be usimg a v-if directive to either show the binding with and without the filter.

Additionally, you are referencing a getParticipants endpoint but using an HTTP post method. Generally, I would recommend that the endpoint be named /users/participants with a GET method that returns the participants, and a POST method (to the same endpoint) with a JSON request body that creates a participant (or something similar). A getParticpants endpoint is poor naming, you generally don’t want to have an endpoint be named after an action, but rather it should simply be named after the resource. Web service “methods” are more of a SOAP thing.