Django(REST API)とVue.jsを使ってSPAを作成する方法

Question

前提・実現したいこと

前提

• サーバサイド:Django(REST API)
  django-restframework
  rest-framework-jwt
  webpack-loader

• フロントサイド:Vue.js
  vueCLIで構築
  Vuetify

実現したいこと

Django REST APIとVue.jsを使用してSPAを作成しようと考えています。
上記の構成で実装する上で質問が2点あります。

1. vue.config.jsの記述方法
2. DjangoテンプレートとVueの共存方法

vue.config.jsの記述方法

vue.config.jsでバンドル先を設定しているのですが、下記ディレクトリ構成のように指定したいです。
また、初歩的な質問になるのですが、バンドルする前のhtmlやcssはどこで管理しておくべきなのでしょうか？

// vue.config.js
module.exports = {
    transpileDependencies: [
    'vuetify'
    ],
    devServer: {
        proxy: {
            '^/api': {
                target: 'http://192.168.33.12:8000',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': 'api'
                }
            }
        },
        port: 8080,
        host: '192.168.33.12',
    },
    outputDir: '../server',
    publicPath: '/',
    indexPath: 'templates/index.html',
    assetsDir: 'static',
    configureWebpack: {
        module: {
            rules: [
                {

                }
            ]
        }
    }
}

現状のディレクトリ構成

SPA-Project/
    ├─django_server/
    |   ├─django_server/
    |   ├─django_app/
    |   ├─templates/
    |   |   ├─login.html # ここにバンドルされたhtmlを置きたい
    |   |   └─index.html # ここにバンドルされたhtmlを置きたい
    |   |
    |   ├─static/
    |   |   ├─css/  # ここにバンドルされたcssディレクトリを置きたい
    |   |   ├─sacc/ # ここにバンドルされたscssディレクトリを置きたい
    |   |   └─js/   # ここにバンドルされたjsディレクトリを置きたい
    |   |
    |   ├─db.sqlite3
    |   └─manage.py
    |
    └─vue_client/
        ├─src/
        |   ├─assetes/
        |   |   ├─css/  # バンドル前のcssディレクトリ。ここで編集する？
        |   |   ├─scss/ # バンドル前のscssディレクトリ。ここで編集する？
        |   |   └─js/   # バンドル前のjsディレクトリ。ここで編集する？
        |   |
        |   ├─components/
        |   ├─plugins/
        |   ├─router/
        |   ├─store/
        |   ├─views/
        |   ├─templates/
        |   |   ├─login.html    # バンドル前のlogin.html。ここでDjangoのテンプレートを使用して編集する？
        |   |   └─index.html    # バンドル前のindex.html。ここでDjangoのテンプレートを使用して編集する？
        |   |
        |   ├─App.vue
        |   └─main.js
        |
        ├─package.json
        ├─vue.config.js
        ├─babel.config.js
        └─.editorconfig

Djangoテンプレートとの共存

webpack-loaderでバンドルされたjsを読み込むことまでは理解できたつもりなのですが、
Djangoテンプレートと共存する際は、バンドル前のhtmlにDjangoのテンプレートタグを記述するのかがよくわかりませんでした。

vue_client/src/templates/index.htmlに下記のように記述すれば、Djangoテンプレートとvueの共存が可能になるのか？

{% verbatim %}
<h1>{{ django.temp }}</h1>
{% endverbatim %}

下記URLのように記述したいです。
vue.jsのDjangoでの使いどころ

環境

• VirtualBox
• vagrant
• centos-7
• Python 3.7.0
• Django 2.5.5
• Vue.js 2.6.11
• vue/cli 4.2.3
• Vuetify 2.2.11

以上、拙い文章ではございますが、どなたかご教授いただけると幸いです。