Local variable vs data. Huge loss in performance

Question

I have a VueJS and Cesium project that is having a performance issue in regards to a degradation in frame-rate. I know where the issue is, yet, I don't know why or how to work around it.

export default {

    name: "Map",

    components: { ... },

    data: function () {
        return {
            viewer: {}        
        }
    },

    methods: { ... },

    mounted() {

        // 150-200 FPS; but no access to the viewer object outside of this component.
        let viewer = new Viewer('cesiumContainer');

        // 20-30 FPS; but yields me the access I need for other components to utilize.
        this.viewer = new Viewer('cesiumContainer');

        ... rest of my source code ...
    }

I can maintain well above 150-200 FPS with all the content I need to display versus an abysmal 20-30 FPS. I have eliminated the rest of my source code and simply have just tried rendering the Cesium world using just the above source code and this still happens - which is why I believe this is the root of my entire problem. But I do not understand why is this.viewer causing such a huge performance hit.... What can I do to resolve the problem?

EDIT #1:

Here is a sandbox incorporating Vue and Cesium: https://codesandbox.io/s/peaceful-satoshi-1mog9

Using the search function at the top right, go to "Grand Canyon National Park, AZ" and use the 'Ctrl' and mouse to angle the camera to see the terrain. You should get something like this (note the low FPS and sluggish response rate):

However, if I do the same thing making viewer a localized variable, the response rate and FPS is far superior:

Answer 1

From anatoly's comment: Assigning to a prop in the data section automatically makes your object and all its props reactive and if these props change their values frequently this can impact on a performance.

To avoid this, create your variable outside of the export default {} object.

It will look like this:

var myCesiumObj = null

export default {
    name: "",
    components: {...},
    mounted: function() {
        myCesiumObj = new Viewer('cesiumContainer');
    },
    data() {
        return {
            /* Do not put it here */
        }
    },
    methods: {...},
}

Note you will not need to use this. to access the variable, it will be available everywhere in this component.