Vuejs computed and watch - vue.js

Question

I was reading this Vue guide about computed and watcher properties.
I was wondering about this part: this.debouncedGetAnswer = _.debounce(this.getAnswer, 500) in the created property.
My question is
is this formula going to add this.debouncedGetAnswer in the data or methods option/property of the component? Because I can see that debouncedGetAnswer is accessed with this like you would have if it is inside the data or methods property of the component. Any this.propertyName would be added to the vue component?
Also in the watch question, how do I know that functions can have argument like that? I tried console log of newQuestion and oldQuestion and saw the old and new value of the input. I am a beginner and I've been seeing a lot of functions that have arguments that I do not know they come from, but it is like they are inherent or something.
Thank you!
<div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>
<!-- Since there is already a rich ecosystem of ajax libraries -->
<!-- and collections of general-purpose utility methods, Vue core -->
<!-- is able to remain small by not reinventing them. This also -->
<!-- gives you the freedom to use what you're familiar with. -->
<script src="https://cdn.jsdelivr.net/npm/axios#0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash#4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
el: '#watch-example',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
// whenever question changes, this function will run
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.debouncedGetAnswer()
}
},
created: function () {
// _.debounce is a function provided by lodash to limit how
// often a particularly expensive operation can be run.
// In this case, we want to limit how often we access
// yesno.wtf/api, waiting until the user has completely
// finished typing before making the ajax request. To learn
// more about the _.debounce function (and its cousin
// _.throttle), visit: https://lodash.com/docs#debounce
this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
},
methods: {
getAnswer: function () {
if (this.question.indexOf('?') === -1) {
this.answer = 'Questions usually contain a question mark. ;-)'
return
}
this.answer = 'Thinking...'
var vm = this
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Error! Could not reach the API. ' + error
})
}
}
})
</script>

Answer 1

debouncedGetAnswer won't be added to data or methods because you didn't add it there. It doesn't serve a good purpose to add it to methods because debouncing is generally should be applied to component instance, not all instances. It's possible to add it to data by adding it to data instead of created but this isn't needed because debouncedGetAnswer won't benefit from being reactive.
watch functions are callbacks. newQuestion and oldQuestion parameters are provided by Vue. This is specified in API documentation.

Answer 2

if you want to limit HTTP calls by debounce function, you can try to do these ways:
Use :value and #input to instead of v-model
<input :value="question" #input="debouncedGetAnswer($event)" />
implement debouncedGetAnswer on the methods of component
methods: {
debouncedGetAnswer: _.debounce(function (event) {
const inputValue = event.target.value;
this.getAnswer(inputValue);
}, 500),
getAnswer: function (newQuestionValue) {
// call API
}
full example
https://codesandbox.io/s/compassionate-germain-25kcd
<template>
<div id="watch-example">
<p>
Ask a yes/no question:
<input :value="question" #input="debouncedGetAnswer($event)" />
</p>
<p>{{ answer }}</p>
</div>
</template>
<script>
import _ from "lodash";
import axios from "axios";
export default {
name: "HelloWorld",
data: function () {
return {
question: "",
answer: "I cannot give you an answer until you ask a question!",
};
},
methods: {
debouncedGetAnswer: _.debounce(function (event) {
const inputValue = event.target.value;
this.getAnswer(inputValue);
}, 500),
getAnswer: function (newQuestionValue) {
if (newQuestionValue.indexOf("?") === -1) {
this.answer = "Questions usually contain a question mark. ;-)";
return;
}
this.answer = "Thinking...";
var vm = this;
axios
.get("https://yesno.wtf/api")
.then(function (response) {
vm.answer = _.capitalize(response.data.answer);
})
.catch(function (error) {
vm.answer = "Error! Could not reach the API. " + error;
});
},
},
};
</script>
<style scoped>
</style>