Laravel с vue невозможно сделать array.push

Question

У меня есть компоненты продуктов, в которых есть таблица из двух объединенных таблиц, products и suppliers таблицы. Когда я добавляю данные, я всегда вызываю метод getProducts(), который вызывает метод index, и я не хочу, чтобы это происходило каждый раз, когда я добавляю продукт или успешное событие из моей трансляции. Я попытался сделать this.products.push(e.product) из своего трансляции. И вроде получилась ошибка Error in render: "TypeError: Cannot read property 'supplier_name' of undefined". Может кто подскажет, что мне с этим делать?

Вот мой контроллер продуктов. Индексирование и сохранение

   public function index()
    {
        $products = Product::with('supplier')->get();
        return response()->json($products);
    }

public function store(Request $request)
    {
        $product = new Product;
        $validator = \Validator::make($request->all(), [
            'product_name' => 'required',
            'barcode' => 'required|unique:products',
            'price'=> 'required',
            'category' => 'required',
            'supplier' => 'required',
        ]);
        if ($validator->fails()) {
          //some validations
        } else {
            $product->barcode = $request->barcode;
            $product->product_name = $request->product_name;
            $product->price = $request->price;
            $product->quantity = 0;
            $product->category = $request->category;
            $product->supplier_id = $request->supplier;
            $product->save();

            broadcast(new ProductsEvent(\Auth::user()->name, $product));
        }
    }

ProductsEvent

class ProductsEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public $user, $product;
    public function __construct($user, Product $product)
    {
        $this->user = $user;
        $this->product = $product;
    }
    public function broadcastWith(): array
    {
        return [
            'product' => $this->product,
            'user' => $this->user
        ];
    }
    public function broadcastOn()
    {
        return new Channel('Products');
    }
}

Vue компонентный метод

   addProduct(){
                axios.post('/addProduct',{
                    product_name: this.product_name,
                    quantity: 0,
                    supplier: this.supplier.id,
                    category: this.category,
                    barcode: this.barcode,
                    price: this.price
                }).then((res)=>{
                    this.clearValues()
                    $('#exampleModal').modal('hide')
                    toastr.success('Product Added!')
                    this.getProducts() //always calling this method
                }).catch((res)=>{
                    toastr.error(res.message+' Check your Inputs')
                })
            },

   created(){
            this.getProducts()
            this.getSuppliers()
            window.Echo.channel('Products').listen('ProductsEvent',(e)=>{
                //this.products.push(e.product) this one is the error
                this.getProducts() // i need to call this everytime
                console.log(e.product)
                // console.log(e.product.product_name +' has been added by '+ e.user);              
            })
        }

Вывод Console.log

barcode: "2005"
category: "Phone"
created_at: "2020-05-08 15:35:28"
deleted_at: null
price: 500
product_id: 41
product_name: "Headset"
quantity: 0
supplier_id: 1
updated_at: "2020-05-08 15:35:28"
__proto__: Object

ОБНОВЛЕНИЕ : Изменен возврат широковещания на

 public function broadcastWith(): array
    {
        return [
            'product' => $this->product->with('supplier')->orderBy('product_id', 'desc')->first(),
            'user' => $this->user
        ];
    }

При входе с консоли с использованием console.log(e.product)

{product_id: 57, barcode: "61", product_name: "Push 2", price: 200, quantity: 0, …}
barcode: "61"
category: "Phone"
created_at: "2020-05-08 17:33:14"
deleted_at: null
price: 200
product_id: 57
product_name: "Push 2"
quantity: 0
supplier: {supplier_id: 1, supplier_name: "Apple", supplier_address: "California", supplier_email: "apple@icloud.com", supplier_phone: "09270277397", …}
supplier_id: 1
updated_at: "2020-05-08 17:33:14"
__proto__: Object

кажется, что DOM не обновляется с использованием this.products.push(e.product)