Using try catch in watch of Vue.js

Question

I have a textarea. I'am coding an object. I want to control this data that is available for syntax. My html code is:

<b-form-textarea
   id="textarea-state"
   v-model="data.deviceData"
   :state="codingControl == true"
   rows="8"
 />

I'm coding this below object in my b-form-textarea component.

{
   "device_id":"",
   "outputs":[false,false,false,false,false,false,false,false],
   "inputs":[false,false,false,false,false,false,false,false]
}

And I watch this object is available for syntax or not. But try catch can not catch the error. How can I catch this error, if that object has a syntax error?

watch: {
   data: {
      handler(val) {
        try {
          this.datas = JSON.parse(val.deviceData)
          this.codingControl = true
        } catch (error) {
          this.datas = JSON.parse(val.deviceData)
          this.codingControl = false
        }
      },
      deep: true,
    },
}

By the way watch is runnig. single problem try catch can not run.

Answer 1

Whats probably happening is this:

watch: {
   data: {
      handler(val) {
        try {
          this.datas = JSON.parse(val.deviceData)    // Step 1: Lets say this throws an error
          this.codingControl = true
        } catch (error) {                            // Step 2: Error get caught here
          this.datas = JSON.parse(val.deviceData)    // Step 3: Same invalid data is being parsed, so it will throw an error again 
          this.codingControl = false                 // Step 3.5: It never reaches here because the code above threw an error
        }
      },
      deep: true,
    },
}