Vue- Importing a component into a single Vue file affects my v-data-table across all files

Question

So I have a vue file and in that vue file there is a v-data-table. I recently created a component that would act as a dialog that would pop up on click to filter the headers in the v-data-table. When I import the component into my file, my v-data-table :loading only loads to the first component of my screen. Not only that, this one import affects all my other v-data-tables as well.

 <v-dialog v-model="dialog" presistent max-width="500px">
        <FilterHeader
        :headers="headers"
        :allHeaders="allHeaders"
        @filtersUpdate="filtersUpdate"></FilterHeader>
      </v-dialog>      

<v-data-table
          dense
          v-model="selectedRecords"
          :single-select="singleSelect"
          show-select
          :headers="headers"
          :search="search"
          :items="routerData"
          :items-per-page="10"
          :loading="loadingTable"
          item-key="router_id"
          @click:row="handle_row_click"
          class="elevation-1 dtwidth"
        >

When I add the line

<script>
...
...
import FilterHeader from "./FilterHeader.vue";
</script>

My loading table across ALL files (not just the vue file im working on) gets affected like this. (Look at the loading bar to see how it only reaches past the first column)

I want the loading bar to reach across the entire width of the data table on all my screens. Why is the filterheader component affecting even the v-data-tables on the .vue files that are unrelated to this file?

Answer 1

My CSS class inside my filter component was

<style>
    .column{
        display: inline-block;
        width: 50%;
        box-sizing: border-box;
        padding: 0 10px;
    }
</style>

Which was affecting my V-data-table. I changed the class name from "column" to "header-list" and it got fixed