Usually, when working inside methods, computed properties, or lifecycle handlers in Vue, you will utilize the keyword this to refer back to the component where the method/computed property/handler is linked. The context of this is determined by the current execution of the function.

The issue arises with using this when a new function is defined within the scope of the current function, which occurs when creating a callback for a promise (e.g., axios.post, axios.get). Take a look at this code snippet:

AddTicket: function () {
  // On this line, "this" points to the Vue instance
  // It's safe to use "this" to access any data properties of the Vue
    axios.post('/api/Tickets', ...)
      .then(function (response) {
        // However, "this" HERE does NOT refer to the Vue!!
        // The explanation for this behavior is provided below
      })
}

In the above scenario, the first comment could be replaced with code that utilizes this to access data properties or invoke methods of the Vue (this.tickets). Nonetheless, the second comment is situated within a new function context, and thus, this will not reference the Vue object. This is due to the fact that when declaring a new function in JavaScript using the function() {} syntax, that function possesses its own distinct function context separate from the enclosing function.

There are various ways to tackle this issue in JavaScript. One common approach nowadays is to either employ a closure to capture the correct this or use an arrow function. Consider this revised code:

AddTicket: function () {
    axios.post('/api/Tickets', ...)
      .then((response) => {
        // In this case, "this" ALSO refers to the Vue instance
      })
}

It's worth noting that in this example, the callback is defined using an arrow function (() => {}). Arrow functions do not establish their own function context but instead rely on the context in which they are declared—referred to as having lexical scope.

Another commonly used workaround is employing a closure.

AddTicket: function () {
  const self = this // Saving a reference to the desired "this"
    axios.post('/api/Tickets', ...)
      .then(function(response){
        // Despite the change in context here, and being unable to utilize
        // "this", we can leverage the previously declared reference (self)
        // pointing to the Vue instance appropriately
        self.tickets = response
      })
}

Lastly, one can utilize the bind method to create a function with a specific this. Nevertheless, this practice is less prevalent nowadays with the availability of arrow functions.

AddTicket: function () {
    axios.post('/api/Tickets', ...)
      .then(function(response){
        this.tickets = response
      }.bind(this)) // Include ".bind(this)" at the end of the function here
}

Under most circumstances, it's advisable not to follow the pattern demonstrated in your question where a reference to the Vue instance is stored in the variable vm and utilized within the Vue object itself. Such a practice is considered undesirable.

Furthermore, detailed information on correctly handling this can be found in numerous tutorials spread across the internet and discussions on platforms like StackOverflow.

Finally, here's the modified code from your initial query ensuring proper use of this:

var vm = new Vue({
  el: '#app',
  data: {
    tickets: [],
    top: 100,
    search: '',
    showAdd: false,
    ticket: null
  },
  mounted: function () {
    // Omitting $nextTick since unnecessary
    this.GetTickets(100)
  },
  methods: {
    GetTickets: function (top) {
      axios.get('/api/Tickets', { params: { Top: top }})
        .then(response => this.tickets = response.data)
        .catch(error => console.log(error));
    },
    ClearTicket: function () {
      var t = {
        "ticketSubject": '',
        "contactName": '',
        "createdAt": moment()
      }
      this.ticket = t;
      this.showAdd = !this.showAdd;
    },
    AddTicket: function () {
      axios.post('/api/Tickets', this.ticket)
        .then(() => this.GetTickets(100))
        .catch(error => console.log(error));

      this.showAdd = false;
    }
  },
})

To truly grasp how it all works, stick to these straightforward guidelines:

Within the Vue object, always employ this, and utilize its reference identifier outside of it:

var vm = new Vue({
  // Use "this" inside
  el: '#app',
  data: {
    something: true
  },
  created: function () {
    this.something = false // such as here
  }
})

// Outside, rely on the reference identifier,
// as there is no alternative
vm.something = null

Avoid using the reference name within the referenced object itself. When you are outside of the Vue object, your only option is to use the reference name.

Inside Vue, the content of this might change. It functions as another object automatically generated within each function/object. Thus, abide by this second guideline: prior to delving into nested, secondary-level functions, store this in a reference/variable. Why?

var vm = new Vue({
  el: '#app',
  data: {
    something: true
  },
  created: function () {
    // In the first level function, 
    // you can utilize "this"
    axios.get('/uri').then(function () {
      // Here, you are in a nested, secondary level
      // function. It will have its own "this" object
      this.something = false // no error here but...
      // You did not alter the value of "something" in the data object,
      // instead, you merely created a new property, also named "something,"
      // within this nested "this" object.
    })
  }
})

As previously mentioned, each function has its own this object. Hence, with 'this.something = false,' you are essentially generating a new property 'something' within the 'this' object in the nested, secondary level function rather than modifying 'this' in the first level function. Put simply, within the nested function, you lose reference to the previous this from the first level function, as its content was overwritten during the creation of the nested function. Therefore, if you need to access the this object from the first level function in the nested function, save it under a different name that won't be overwritten:

var vm = new Vue({
  el: '#app',
  data: {
    something: true
  },
  created: function () {
    var anyName = this // Save a reference to this under a different name
    axios.get('/uri').then(function () {
      this.something = false // no error here, but you are still creating a new property
      anyName.something = false // NOW you are truly altering the value of "something" in data
    })
  }
})

You can choose any name to save it under. However, for simplicity's sake, name it self. Avoid using vm, as this could lead to confusion about whether it clashes with var vm = new Vue() or not. It won't, but eliminate the risk of confusion and just opt for self.

Do not experiment with arrow functions, avoid using bind. Just adhere to these straightforward rules. As you gain more experience, you can (and should) incorporate them, but for now, focus on coding without the hassle of debugging :)