Modifying vuetify theme with laravel - laravel

Question

I'm having trouble with updating the color of my vuetify theme. I tried this method but it is not updating my button color.
App.js
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify, {
theme: {
primary: '#ff0000',
secondary: '#ff0000',
accent: '#ff0000',
error: '#ff0000'
}
});
// components here
const app = new Vue({
el: '#app',
vuetify: new Vuetify()
});
Component.vue
<template v-slot:activator="{ on }">
<v-btn color="primary" dark class="mb-2" v-on="on">Add Department</v-btn>
</template>
Main.blade.php
<div id="content-wrapper" class="d-flex flex-column">
<div id="content" class="bg-white" style="background-color:white!important;">
#include('layouts.topbar')
<div class="container-fluid">
<v-app id="app">
#yield('content') //This is where my components are located
</v-app>
</div>
</div>
#yield('DashboardView-main-footer')
</div>

Answer 1

You should use v-app vuetify tag like
Component.vue
<template v-slot:activator="{ on }">
<v-app>
<v-btn color="primary" dark class="mb-2" v-on="on">Add Department</v-btn>
</v-app>
</template>

Answer 2

That's because you have to change the light theme, which I assume you're using since you haven't put dark to true.
Vue.use(Vuetify, {
theme: {
themes: {
light: {
primary: '#ff0000',
secondary: '#ff0000',
accent: '#ff0000',
error: '#ff0000'
}
}
}
});