Александр Маджугин

Почему это не зашивать?
Как раз более правильным будет зашить все запросы в тот компонент который их отправляет.

Какие могут быть исключения?

1 Если один запрос отправляют разные компоненты, но тогда лучше пересмотреть сами эти компоненты - например сделать один родительский, который объединит в т.ч. и запросы и несколько внутренних, сменяемых компонентов реализующих например разное представление. В крайнем случае сделать миксин с запросами

2 Если данные прилетающие в ответ на отправляемые запросы используются разными компонентами, а не только тем которые отправляет запрос. В этом случае для хранения данных лучше использовать стор и туда же поместить запросы, например в экшены viuex, а компоненты в этом случае должны взаимодействовать не с сервером, а с vuex.

Во-первых зачем флаг - у тебя есть токен, вот тебе и флаг
Во-вторых встрой эти данные прямо в страницу, если сервер авторизации и сервер с которым работаешь это по факту один и тот же сервак. Т.е. главная же у тебя все равно грузится?
Добавь в нее объект json как-нибудь так:

<script type="extension/settings" name="user">{"token":""}</script>

И читай эти параметры при загрузки приложения. А потом храни в LS. Ну а если токен устарел - значит устарел.
Если же серверы разные - то тут никак не пройдешь мимо запроса к серверу авторизации. Смело делай его - в чем проблема? Почему это вдруг не правильно?

Потому что ты изменяешь this.cities

Что такое element.city в строке element.city = prb(element.city, searchSring.toLowerCase())?
Это ссылка на this.cities[x].city - ты его перезаписал. Все, адью.

Сделай так:

cities.forEach(element => {
                        let newElement = JSON.parse(JSON.stringify(element))
                        newElement.city = prb(newElement.city, searchSring.toLowerCase())
                        if ((newElement.city).length>0){
                            arr.push(newElement)
                        }
                });

И что мешает хранить все города в едином списке, а не рзабитыми по буквам?

А зачем? Просто пусть этот div перекрывает текст, а сам содержит такой же точно текст нужного цвета так же спозиционированный и выходящий за его край.

APP.popup = function (component,props) {
	let mount_poiunt = document.createElement('div');
	document.body.append(mount_poiunt);
	
	var props = {
		'component':component,
		'props':props
	}
	
	var Popup = Vue.extend({
		data: function () {
			return props
		},
		destroyed () {
			this.$el.remove()
		},
		methods: {
			close: function () {
				this.$destroy()
			}
		},
		template: `<div class="popup">
						<span v-on:click="close" class="close">✖</span>
						<component v-bind:is="component" v-on:close="close" v-bind="props"/>
					</div>`
	})
	
	new Popup().$mount(mount_poiunt)
};

Далее ты просто делаешь так в методе компонента своего:

APP.popup('имяКомпонентаКоторыйНадоПоказатьВПопапе', {параметрыЭтогоКомпонента});