Eka555

В событие компонента mounted()
добавить показ прелоадера, запустить методы загрузки данных
убрать прелоадер, когда они завершатся (с помощью Promise.all)
Читать про промисы тут - https://learn.javascript.ru/promise

Примеры:
один запрос:

mounted() {
	this.showPreloader = true
	this.$http.get('/someUrl').then(response => {
		// данные загружены, убираем прелоадер
		this.showPreloader = false
		// записываем полученные данные куда-либо
		this.someData = response.body
	}, response => {
		// запрос завершился ошибкой
		// показываем сообщение об ошибке
		this.showPreloader = false
		this.showError = true
	});
},

Несколько запросов:

mounted() {
	this.showPreloader = true
	Promise.all([
		this.$http.get('/someUrl'),
		this.$http.get('/someUrl2')
	]).then(results => {
		// данные загружены, убираем прелоадер
		this.showPreloader = false
	}, response => {
		// один или несколько запросов завершились с ошибкой
		// показываем сообщение об ошибке
		this.showPreloader = false
		this.showError = true
	});
},

PS. Код справедлив для однофайловых компонентов с использованием Webpack. Используется синтаксис ES6.

У директив есть хуки (https://ru.vuejs.org/v2/guide/custom-directive.htm... которые срабатывают при определенных событиях. В том числе при обновлении элементов и компонентов.

сделать slot в modal
vuejs.org/v2/guide/components.html#Content-Distrib...

Покажите DSN в PDO. Скорее всего вы не то в нем написали.

Использую Singleton.
Вопрос такой сколько экземпляров классна можно создавать ?

Если у вас синглтон, то вы физически можете создать только 1 экземпляр. Для того и делают синглтоны... в чем вопрос?

как думаешь, бывают ли ситуации, когда нужно иметь два подключения в скрипте к двум разным базам?
по моему, такая ситуация вполне реальна
сл-но делать одиночкой класс для работы с субд - не правильно

если дружите с английским https://en.wikipedia.org/wiki/Method_chaining
на русском https://ru.wikipedia.org/wiki/Fluent_interface
еще на русском forwebdev.ru/javascript/chaining хоть и js, но суть понятна.

Что бы понять что такое "чейнинг" и зачем это нужно, надо ознакомиться с ООП.
Метод, возвращающий экземпляр объекта, в контексте которого был вызван метод, позволяет строить цепочки вызовов как у тебя в вопросе. Это сделано что бы избежать написания подобных портянок:

$mailer = new Mail;
$mailer->to('eka1895@mail.ru');
$mailer->subject('Тема сообщения');
$mailer->body('Текст сообщения');
$mailer->send();

Насчет вопроса, правильно ли это - да, в этом нет ничего плохого. Но return this можно писать, если метод не возвращает никакого явного значения.

Вернуть инстанс текущего класса, удобно для чейнинга:
$this->a()->b();