Where exactly lies the boundary between components (modules) and the application itself?

Question

Vue.js

Hello.
There is a search form:
- There is a component - a list of search filters - checkboxes. They are defined by the schema in the JSON file;
- There is a component - a button by which the search is initiated;
- There is a component - the input field of the search query itself (but this is not quite about that).

JSON that defines the form

{
  "filters" : [{
    "name" : {
      "filter1" : "Header1"
    },
    "items" : {
      "value1" : "Checkbox Name 1",
      "value2" : "Checkbox Name 2",
      "value3" : "Checkbox Name 3"
    }
  }, {
    "name" : {
      "filter2" : "Header2"
    },
    "items" : {
      "value4" : "Checkbox Name 4"
    }
  }]
}

 

Based on this, the form itself has a similar appearance

<form>
  <filter>
    <name>Header1</name>
    <items>
      <input type="checkbox" name="filter1" value="value1"> Checkbox Name 1
      <input type="checkbox" name="filter1" value="value2"> Checkbox Name 2
      <input type="checkbox" name="filter1" value="value3"> Checkbox Name 3
    </items>
  </filter>
  <filter>
    <name>Header2</name>
    <items>
      <input type="checkbox" name="filter2" value="value4"> Checkbox Name 4
    </items>
  </filter>
  <!-- etc. -->
</form>
<button>Search</button>

The state of checkboxes is written to an array and localStorage, it is saved after the page is reloaded.

This is how it looks like

{
  filter1 : ["value1", "value3"], // checkbox с "value2" не выбран
  filter2 : ["value4"]
}

The data from this form (if the second checkbox is not selected) is converted into a string like:
URL_TO_JSON?query=text& filter1=value1,value3 & filter2=value4 (etc.)
On clicking the button, we get JSON with search results.
How exactly is the logic divided between the components and the application itself?
Is the component or application taking data from JSON to build a list of filters ?
Does the component or application write data to localStorage and receive it?
Does the component or application receive data with search results?
How exactly do the component and application interact? (Vuex, I understand, but I don’t understand the essence of modularity itself, if I may say so).

Answer 1

It's probably worth first understanding what you call a component and what an application.
I would single out the following elements of the application:
1. Components - are responsible for how to display data
2. Services - are responsible for where to get / where to transfer / how to store data.
Based on this, if vuex is used:
1. Components interact with it, it is a data source. (I would also conditionally divide the components into those that interact with vuex and are completely encapsulated
) location.