How to call method from watcher in Vue2?

Question

Vue.js

Hello, I have this component:

export default {
        name: "select2App",
        props: ['options', 'value'],

        data: () => {
            return {
                label: 'Friday'
            }
        },
        
        methods: {

            poom() {
                console.log('poom');
            },

            getOptionsData(options) {

                let data = $.map(options, function (obj) {
                    obj.id = obj.id || obj.pk || obj.city_id;
                    obj.text = obj.text || obj.varTitle || obj.city_title;
                    return obj;
                });
                return data;
            }
        },

        mounted: function () {

            // 1)
            console.log(this);
            // +
            this.poom();
           // + 
           console.log(this.label);
           // +
            let data = this.getOptionsData(this.options);

           // ...
        },
        watch: {

            options: (options) => {
                // 2)
                console.log(this);
               // undefined
                console.log(this.label);
                // TypeError: _this.poom is not a function
                this.poom();
                // TypeError: _this.getOptionsData is not a function
                let data = this.getOptionsData(options);

                // ...
            }
        },

        destroyed: function () {
            $(this.$el).off().select2('destroy')
        }
    }

Cases for console.log(this)
1) Everything is fine here:

VueComponent
$attrs
:
(...)
$children
:
[]
$createElement
:
ƒ (a, b, c, d)
$el
:
select.select2-hidden-accessible
$listeners
:
(...)
$options
:
{parent: VueComponent, propsData: {…}, _parentVnode: VNode, _parentListeners: {…}, _renderChildren: Array(1), …}
$parent
:
VueComponent {_uid: 16, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
$refs
:
{}
$root
:
Vue$3 {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue$3, …}
$scopedSlots
:
{}
$slots
:
{default: Array(1)}
$validator
:
Validator {strict: true, fields: FieldBag, paused: false, …}
$vnode
:
VNode {tag: "vue-component-29-select2App", data: {…}, children: undefined, text: undefined, elm: select.select2-hidden-accessible, …}
errors
:
(...)
fields
:
(...)
format2
:
ƒ boundFn(a)
getOptionsData
:
ƒ boundFn(a)
label
:
(...)
options
:
(...)
poom
:
ƒ boundFn(a)
value
:
(...)
_c
:
ƒ (a, b, c, d)
_computedWatchers
:
{errors: Watcher, fields: Watcher}
_data
:
{__ob__: Observer}
_directInactive
:
false
_events
:
{input: Array(1)}
_hasHookEvent
:
false
_inactive
:
null
_isBeingDestroyed
:
false
_isDestroyed
:
false
_isMounted
:
true
_isVue
:
true
_props
:
{}
_provided
:
{$validator: Validator}
_renderProxy
:
Proxy {_uid: 17, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
_routerRoot
:
Vue$3 {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue$3, …}
_self
:
VueComponent {_uid: 17, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
_staticTrees
:
[]
_uid
:
17
_vnode
:
VNode {tag: "select", data: undefined, children: Array(1), text: undefined, elm: select.select2-hidden-accessible, …}
_watcher
:
Watcher {vm: VueComponent, sync: false, lazy: false, user: false, deep: false, …}
_watchers
:
(5) [Watcher, Watcher, Watcher, Watcher, Watcher]
$data
:
(...)
$isServer
:
(...)
$props
:
(...)
$route
:
(...)
$router
:
(...)
$ssrContext
:
(...)
get $attrs
:
ƒ reactiveGetter()
set $attrs
:
ƒ reactiveSetter(newVal)
get $listeners
:
ƒ reactiveGetter()
set $listeners
:
ƒ reactiveSetter(newVal)
get errors
:
ƒ computedGetter()
set errors
:
ƒ ()
get fields
:
ƒ computedGetter()
set fields
:
ƒ ()
get label
:
ƒ proxyGetter()
set label
:
ƒ proxySetter(val)
__proto__
:
Vue$3

2) Differs from the first 1) :

Object
default
:
data
:
ƒ data()
destroyed
:
ƒ destroyed()
methods
:
{format2: ƒ, poom: ƒ, getOptionsData: ƒ}
mounted
:
ƒ mounted()
name
:
"select2App"
props
:
{value: {…}, options: {…}}
render
:
ƒ ()
staticRenderFns
:
[]
watch
:
{value: ƒ, options: ƒ}
_Ctor
:
{0: ƒ}
__file
:
"/var/www/testcrm/resources/assets/js/components/bids/directives/Select2.vue"
__proto__
:
Object
__esModule
:
true
__proto__
:
constructor
:
ƒ Object()
hasOwnProperty
:
ƒ hasOwnProperty()
isPrototypeOf
:
ƒ isPrototypeOf()
propertyIsEnumerable
:
ƒ propertyIsEnumerable()
toLocaleString
:
ƒ toLocaleString()
toString
:
ƒ toString()
valueOf
:
ƒ valueOf()
__defineGetter__
:
ƒ __defineGetter__()
__defineSetter__
:
ƒ __defineSetter__()
__lookupGetter__
:
ƒ __lookupGetter__()
__lookupSetter__
:
ƒ __lookupSetter__()
get __proto__
:
ƒ __proto__()
set __proto__
:
ƒ __proto__()

Why is this happening and how can I call the current component's method from watcher ?

Answer 1

2. well, arrow functions, loss of contextoptions: (options) => {