Vue can't read prop in script, but renders fine in template

Question

So i am trying to use prop's object 'meal' to check if it's in my array in LocalStorage but i get an error "meal is not defined". It's getting even more weird beacuse template is using it and works correctly. Does somebody know how to solve it?

 <script>

    
    export default {
      props: {
    meal: Object,
    
  },
      data() {
        return {
          active: localStorage.getItem('products').includes(meal.strMeal)? true: false,
        };
      },
      methods: {
        
        handleClick(item) {
          this.active = !this.active;
          return this.active;
        },
      },
    };
    </script>

I need to know if 'meal' is in my localstorage asap to let page know which color should button be I tried writing active: localStorage.getItem('products').includes(meal.strMeal)? true: false in many places but does not work