Yeldos Adetbekov

Удалить .js.map файлы. Это sourcemaps от webpack))
Дело в том, что месяц назад я добавил дополнительный loader в vue-loader.conf.js. И закомментил sourcemap-овский condition. А именно вот так:

Ха-ха. Просто я не знал как это организовать вместе)) Смешно правда?
Так вот решение:

Вы все верное понимаете. Это называется webSocket-ами. Точно не знаю про пхп, но например, python - не асинхронный, и он из коробки не позволяет оповещать клиента. Для этого есть некие батарейки, такие как django-channels. Поищите для пхп, должно быть тоже. И да, вы ставите слушателей на клиенте(js), и на сервере, путем некоторых функции, делаете broadcast.

Советую использовать для этого новые фронтенд-технологии, такие как vue.js+vuex. Они замечательно справляются с вашими запросами. Отправлять каждый раз на сервер с перезагрузкой(Чистый django) - не очень хорошая идея. То лучше в данном случае использовать ajax.

- Если данные постоянно меняются(Динамические), то лучше обращаться на сервер можно даже сделать так: на стороне клиента сохранять количество данных и сверять их с сервером. Если числа отличаются, то обновить(отправить запрос), а если нет то фильтровать на клиенте(Это конечно не самый лучший damper, но часто спасает)
- Если данные меняются не часто(Не меняются во время средней сессии), то лучше использовать прекрасную реактивность vue.js

let webpack = require('webpack')
let path = require('path')
 
module.exports = {
  entry: './main.js',
  output: {
    path: __dirname + '/build',
    filename: 'bundle.js',
    publicPath: './build'
  },
  resolve: {
  	alias: {
  		'vue$': 'vue/dist/vue.common.js'
  	}
  },
  module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            postLoaders: {
              html: 'babel-loader'
            },
            excludedPreLoaders: /(eslint-loader)/
          }
        }
      ]
    }
}

Верстка неправильная. Используйте bootstrap, либо научитесь грамотно пользоваться flex-box.