Vue app (data out of scope) - Data is not defined at Proxy.calc

Question

*Greetings Stackoverflow peeps.

I am developing my first Vue app and having issues with using the find function to loop through my metals list to pull the specificGravity value based on a matching type prop. It seems that the list is out of scope and I am unable to find a solution through good ole' Google, so I turn to you all.

TIA*

Error:

"vue@next:1751 Uncaught ReferenceError: data is not defined at Proxy.calc (index.html:101:45) at onClick (eval at compileToFunction (vue@next:15591:23), :142:35) at callWithErrorHandling (vue@next:1688:24) at callWithAsyncErrorHandling (vue@next:1697:23) at HTMLButtonElement.invoker (vue@next:9486:15)"

<script>
        var app = Vue.createApp({
            data: function() {  
                
                
               
                return {
                    
                    waxWeight: null,
                    isVisible: true,
                    buttonSize: null,
                    specificGravity: null,
                    metalType: null
                }
            },    

            // <!-- COMPONENTS -->
            components: {
                    },

            // <!-- METHODS -->
            // `this` inside methods point to the current Vue instance
            methods: {
                calc: function (waxWeight, buttonSize, metalType) {

                    var waxWeight = waxWeight
                    var buttonSize = buttonSize
                    var metalType = metalType

                var metals = {metals:[
                    { type: 'silver', specificGravity: 10.3 },
                    { type: 'wGold14', specificGravity: 12.1 },
                    { type: 'wGold18', specificGravity: 11.5 },
                    { type: 'yGold14', specificGravity: 13.6 }]}

                    // method does not have access to data list 
                    const specificGravity = data.metals.find(function(elem){
                        if(elem.name == metalType) 
                        
                        return elem.specificGravity;

                        alert(metalType)
                    });
                }
            },
        })
        app.mount('#app')
    </script> 

Answer 1

Initial issue resolved here: https://codepen.io/pandemicprogrammer/pen/GROWqwR

I was referencing the array object incorrectly and had my JSON data in the wrong spot.

methods: {
                calc: function (waxWeight, buttonSize, metalType) {
                    alert("test")

                    var waxWeight = waxWeight
                    var buttonSize = buttonSize
                    var metalType = metalType

                    var metals = {metals:[
                    { type: 'silver', specificGravity: 10.3 },
                    { type: 'wGold14', specificGravity: 12.1 },
                    { type: 'wGold18', specificGravity: 11.5 },
                    { type: 'yGold14', specificGravity: 13.6 }]}


                    const specificGravity = 
                    metals.metals.find(function(elem){
                         
                        if(elem.type == metalType) {
                            
                            alert(elem.specificGravity)
                            return elem.specificGravity;
                        }

                        

                    });
                }
            },