Advanced search with filters (Laravel + Vue)

I'm creating a search with filters, I managed to create the filters using a library called (https://github.com/Tucker-Eric/EloquentFilter) this way I can accept filters by the url query such as /users?name=er&last_name=&company_id=2&roles[]=1&roles[]=4&roles[]=7&industry=5 now I need to create the front end portion using Vue.

I found a project called bagisto.com that is an ecommerce made with Laravel and Vue, they used a really nice technique to handle this. (https://github.com/bagisto/bagisto/blob/master/packages/Webkul/Shop/src/Resources/views/products/list/layered-navigation.blade.php)

They used inline components to make the filtering, what they actually do is get the list of filterable attributes of a category and loop to display them, set the list of selected filters, append to the url and redirect, it's pretty simple, they didn't need to use Vue Router or anything like that. (the problem with going full Vue with Vue Router and stuff is that it's too encapsulated, if you need localization for example you will have a hard time making it work).

The question I have is:

I have two types of filters: inputs and checkbox.

The input is a field so the user can write the min price and max price for example, and select are mostly (or all) tags, like selecting colors.

For the tags I used a library from spatie (https://github.com/spatie/laravel-tags) that supports tags with types so I can later return all tags of a certain type (like get all tags with type of color).

Reading the Bagisto I noticed that they use the filterable attributes on the database (so the admin can add or remove), they also have a type column so Vue can render the right input, the thing is: as they are using database it's kinda easy, they just have to query and return to Vue, in my case it's more complex because I'm using tags and different types of filters so I would need to create a kind of class or something to expose to vue what is filterable, like:

{
    {
        "name": "Min price",
        "id": "min_price",
        "type": "field",
    }
    {
        "name": "Colors",
        "id": "colors",
        "type": "select",
        "options": {
            "red"
        }
    }
}

This is not a working code of course, it's just something I think that would be required so Vue can render the filters based on its type and options.

What is the best way to generate this structure so Vue can read and display? A repository so I can do something like appending to an array and returning as json, like:

$colors = Tag::getWithType('colors');

?

In resume: I need to create somewhere in my code (a class or something) that will grab all filterable stuff (like all tags and it's types) and also others such as min and max price, and return as json so Vue can read.