Nuxt Uncaught (in promise)

I'm using Nuxt.js and making an axios request however I need to get the request and loop through it twice to get a list and set it back to my data as products or new products so I can display it within the view.

However i'm getting the following error:

Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'newProducts').

I can see the correct data in my console log however when I try to set it to data I get the error

<script>
export default {
    data(){
        return {
            products:[],
            newProducts:[]
        }
    },
    created() { 
        this.fetchData();
    },
    methods:{
        fetchData() {
            this.$axios.get('/products/'+this.$route.name)
            .then((response)=> {
                this.products = response.data
            }).finally(()=>{
                this.formatProducts();
            })
        },
        formatProducts(){
             _.forEach(this.products, function(value){
                _.forEach(value.productList, function(filteredProducts) {
                    console.log(filteredProducts);
                    this.newProducts = filteredProducts;
                });
            });
        }
    }
}
</script>

Update

When I use arrow functions for the second each I get an error Uncaught (in promise) TypeError: values.forEach is not a function

this.products.forEach(function(values){
      values.forEach(products => {
       this.newProducts = products;
       });
 });

Update

Using two arrow functions I get an error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'forEach')

this.products.forEach((productGroup, index) => {
     this.productGroup.forEach((product, index) => {
     console.log(product);
    });
});