This worked fine.

export default {
  name: "SensorChart",
  props: ["sampleData","sampleLabels"],

  data: function() { 
    return {
      chartOptionsLine: { 
        xAxis: {
          data: this.sampleLabels
        },
        yAxis: {
          type: "value"
        },

        series: [
          {
            type: "line",
            data: this.sampleData
          }
        ],
        title: {
          text: "Sensor Data",
          x: "center",
          textStyle: {
            fontSize: 24
          }
        },
        color: ["#127ac2"]
      }
    }
  }
};

An arrow function expression is a compact alternative to a traditional function expression, but is limited and can't be used in all situations.

There are differences between arrow functions and traditional functions, as well as some limitations:

• Arrow functions don't have their own bindings to this, arguments or super, and should not be used as methods.
• Arrow functions don't have access to the new.target keyword.
• Arrow functions aren't suitable for call, apply and bind methods, which generally rely on establishing a scope.
• Arrow functions cannot be used as constructors.
• Arrow functions cannot use yield, within its body.

for more Details in there:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#comparing_traditional_functions_to_arrow_functions

So,if you want to use traditional way, you can use this.

export default {
  ...
  data: function() { return {...} }
}

if you want to use arrow function, While arrow functions do not have their own this pointer, only arguments can be passed when a function is called through call() or apply() (this way can't bind this).