filter product attributes with laravel and vuejs

Question

I tried to make Laravel-Vue-Sidebar-Filters and it works for categories,brands and prices but how to do it with attributes , attributevalues and productAttributes and thank you very much

I tried this code but nothing show in the page(for attributeValues)so please how to do it with the right way thank you very much:

 public function prodat()
    {
       $sizes = AttributeValue::whereHas('attribute', function ($query) {
        $query->where('code', 'size')->where('is_filterable', 1);
    })->get();
    return response()->json($sizes);
      
    }

front.vue:

<h3 class="mt-2">Sizes </h3>
                <div class="form-check" v-for="(size, index) in sizes">
                    <input class="form-check-input" type="checkbox" :value="size.id" :id="'size'+index" v-model="selected.sizes">
                    <label class="form-check-label" :for="'size' + index">
                        {{ size.value }} 
                    </label>
                </div>

I followed https://github.com/LaravelDaily/Laravel-Vue-Sidebar-Filters/commit/0dbffb076c9c16cace8a1b9cddef268e734af808 and how to make it for product attributes if I have this:

product.php:

 protected $fillable = [
        'brand_id', 'sku', 'name', 'slug', 'description', 'quantity',
        'weight', 'price', 'sale_price', 'status', 'featured',
    ];

    /**
     * @var array
     */
    protected $casts = [
        'quantity'  =>  'integer',
        'brand_id'  =>  'integer',
        'status'    =>  'boolean',
        'featured'  =>  'boolean'
    ];

    /**
     * @param $value
     */
    public function setNameAttribute($value)
    {
        $this->attributes['name'] = $value;
        $this->attributes['slug'] = Str::slug($value);
    }


    /**
     * @return \Illuminate\Database\Eloquent\Relations\HasMany
     */
    public function attributes()
    {
        return $this->hasMany(ProductAttribute::class);
    }

attribute.php:

 protected $fillable = [
        'code', 'name', 'frontend_type', 'is_filterable', 'is_required'
    ];

    /**
     * @var array
     */
    protected $casts  = [
        'is_filterable' =>  'boolean',
        'is_required'   =>  'boolean',
    ];

    /**
     * @return \Illuminate\Database\Eloquent\Relations\HasMany
     */
    public function values()
    {
        return $this->hasMany(AttributeValue::class);
    }

attributeValue.php:

  protected $fillable = [
        'attribute_id', 'value', 'price'
    ];

    /**
     * @var array
     */
    protected $casts = [
        'attribute_id'  =>  'integer',
    ];

    /**
     * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
     */
    public function attribute()
    {
        return $this->belongsTo(Attribute::class);
    }

    /**
     * @return \Illuminate\Database\Eloquent\Relations\BelongsToMany
     */
    public function productAttributes()
    {
        return $this->belongsToMany(ProductAttribute::class);
    }

productAttribute.php:

    protected $fillable = ['attribute_id', 'product_id', 'value', 'quantity', 'price'];

    /**
     * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
     */
    public function product()
    {
        return $this->belongsTo(Product::class);
    }

    /**
     * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
     */
    public function attribute()
    {
        return $this->belongsTo(Attribute::class);
    }