How to create a search filter on Vue.js when you use map

I tried to do a search in vue but it didn't work. I tried to make a computed function and every time if I have a word in the search to filter by that word of the product, but I don't understand why it doesn't work My products

 async getProducts() {
      this.$store.dispatch("actions/setLoading", true);
      const products = (await ProductService.getProducts()).data.products;
      this.dataSource = products.map((product, key) => {
        return {
          key: key + 1,
          image_url: (
              <div class="record-img align-center-v">
                <img
                  src={product.image_url}
                  alt={product.product_name}
                  width="100"
                />
              </div>
            ),
          product_name: (<a href={product.product_url}>{product.product_name}</a>),
          price: product.price,
          price_with_discount: product.price_with_discount,
          categories: product.categories,
          sku: product.sku,
          quantity: product.quantity,
          currency: product.currency,
          action: (
            <div class="table-actions">
              asds
              <a href="javascript:void(0)"><sdFeatherIcons type="trash-2" size={14} /> Test</a>
            </div>
          )
        }
      });
      this.$store.dispatch("actions/setLoading", false);
    }

my filter function

watch: {
      search() {
return this.dataSource.filter(product => product.product_name.toLowerCase().includes(searchText.value.toLowerCase()))
    }
}
  

<a-table
                  :rowSelection="rowSelection"
                  :pagination="{ pageSize: 10, showSizeChanger: true }"
                  :dataSource="dataSource"
                  :columns="columns"
                />