Accessing data in a vue component from methods

Question

I'm currently having trouble using "this" in a VueJs component in the right context. I already read a lot of answers which mostly referred to not using arrow functions. As you can see in my attached code-block, I already replaced the arrow functions with regular ones and well... the context is now different but with regards to the error message

---

"TS2339: Property 'answer1' does not exist on type '{ receiveValues(value1: string, value2: string): void; test(): string; }'."

---

the context is now the methods object. I wasted a lot of time now with this problem and I really don't know what to do. So my question is, how can I get the right context to access the data? I appreciate every help and tipps! I use the ts compiler with ES2015.

---

Code:

export default {
name: 'app',
components: {
  Editor,
  Chart,
},
methods: {
  receiveValues(value1: string, value2: string) {
    console.log(value1); 
    this.answer1 = value1; // This is where the error is thrown
    console.log('receiveValues ' + this.test()); // this works just fine
  },
  test() {
    console.log('blablabla');
    return 'did it';
  },
},
data() {
  return {
    content: 'I\'m Test Content!',
    answer1: '',
    answer2: '',
    answer3: '',
    answer4: '',
  };
},

---

Unlike in this post for example, my 'this' context only refers to the methods object, so I can only call its functions, but not the data from the component itself.

Answer 1

To all the people who have the same problem as I had: I still don't know why I couldn't access the right context with 'this', But I found a solution which worked for me:

---

I used typescript decorators for class files from Vue Class Component and now it works! In my opinion the code is even easier to write and cleaner! Thanks to @Michał Perłakowski and @Max Sinev for their help.