diff --git a/themes-default/slim/static/js/add-shows/init.js b/themes-default/slim/static/js/add-shows/init.js
index ee1e20e50b0..b9d6c0c394f 100644
--- a/themes-default/slim/static/js/add-shows/init.js
+++ b/themes-default/slim/static/js/add-shows/init.js
@@ -44,7 +44,7 @@ MEDUSA.addShows.init = function() {
             });
         });
 
-        $('#rootDirs').on('change', () => {
+        $(document.body).on('change', '#rootDirs', () => {
             $.rootDirCheck();
         });
 
diff --git a/themes-default/slim/views/addShows_recommended.mako b/themes-default/slim/views/addShows_recommended.mako
index 823e567db78..201e9e764d4 100644
--- a/themes-default/slim/views/addShows_recommended.mako
+++ b/themes-default/slim/views/addShows_recommended.mako
@@ -1,7 +1,4 @@
 <%inherit file="/layouts/main.mako"/>
-<%!
-    from medusa import app
-%>
 <%block name="scripts">
 % if enable_anime_options:
     <script type="text/javascript" src="js/blackwhite.js?${sbPID}"></script>
@@ -12,7 +9,9 @@ const startVue = () => {
     window.app = new Vue({
         el: '#vue-wrap',
         data() {
-            return {};
+            return {
+                rootDirs: []
+            };
         }
     });
 };
@@ -50,7 +49,7 @@ const startVue = () => {
                                 <li><app-link href="addShows/${realpage + '/'}#tabs-2">Customize Options</app-link></li>
                             </ul>
                             <div id="tabs-1" class="existingtabs">
-                                <%include file="/inc_rootDirs.mako"/>
+                                <root-dirs @update:root-dirs="rootDirs = $event"></root-dirs>
                                 <br/>
                             </div>
                             <div id="tabs-2" class="existingtabs">
diff --git a/themes-default/slim/views/addShows_trendingShows.mako b/themes-default/slim/views/addShows_trendingShows.mako
index 01f2bf63c00..b0332ddc408 100644
--- a/themes-default/slim/views/addShows_trendingShows.mako
+++ b/themes-default/slim/views/addShows_trendingShows.mako
@@ -12,7 +12,9 @@ const startVue = () => {
     window.app = new Vue({
         el: '#vue-wrap',
         data() {
-            return {};
+            return {
+                rootDirs: []
+            };
         }
     });
 };
@@ -50,7 +52,7 @@ const startVue = () => {
                             <li><app-link id="trakt-tab-2" href="addShows/${realpage + '/'}?traktList=${traktList}#tabs-2">Customize Options</app-link></li>
                         </ul>
                         <div id="tabs-1" class="existingtabs">
-                            <%include file="/inc_rootDirs.mako"/>
+                            <root-dirs @update:root-dirs="rootDirs = $event"></root-dirs>
                             <br/>
                         </div>
                         <div id="tabs-2" class="existingtabs">
diff --git a/themes/dark/assets/js/add-shows/init.js b/themes/dark/assets/js/add-shows/init.js
index ee1e20e50b0..b9d6c0c394f 100644
--- a/themes/dark/assets/js/add-shows/init.js
+++ b/themes/dark/assets/js/add-shows/init.js
@@ -44,7 +44,7 @@ MEDUSA.addShows.init = function() {
             });
         });
 
-        $('#rootDirs').on('change', () => {
+        $(document.body).on('change', '#rootDirs', () => {
             $.rootDirCheck();
         });
 
diff --git a/themes/dark/assets/js/add-shows/init.js.map b/themes/dark/assets/js/add-shows/init.js.map
index 27fb4c74117..6bac0cb213d 100644
--- a/themes/dark/assets/js/add-shows/init.js.map
+++ b/themes/dark/assets/js/add-shows/init.js.map
@@ -1 +1 @@
-{"version":3,"names":[],"mappings":"","sources":["js/add-shows/init.js"],"sourcesContent":["(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c=\"function\"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error(\"Cannot find module '\"+i+\"'\");throw a.code=\"MODULE_NOT_FOUND\",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u=\"function\"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){\nMEDUSA.addShows.init = function () {\n    $('#tabs').tabs({\n        collapsible: true,\n        selected: MEDUSA.config.sortArticle ? -1 : 0\n    });\n\n    const imgLazyLoad = new LazyLoad({\n        // Example of options object -> see options section\n        threshold: 500\n    });\n\n    $.initRemoteShowGrid = function () {\n        // Set defaults on page load\n        imgLazyLoad.update();\n        imgLazyLoad.handleScroll();\n        $('#showsort').val('original');\n        $('#showsortdirection').val('asc');\n\n        $('#showsort').on('change', function () {\n            let sortCriteria;\n            switch (this.value) {\n                case 'original':\n                    sortCriteria = 'original-order';\n                    break;\n                case 'rating':\n                    /* Randomise, else the rating_votes can already\n                     * have sorted leaving this with nothing to do.\n                     */\n                    $('#container').isotope({ sortBy: 'random' });\n                    sortCriteria = 'rating';\n                    break;\n                case 'rating_votes':\n                    sortCriteria = ['rating', 'votes'];\n                    break;\n                case 'votes':\n                    sortCriteria = 'votes';\n                    break;\n                default:\n                    sortCriteria = 'name';\n                    break;\n            }\n            $('#container').isotope({\n                sortBy: sortCriteria\n            });\n        });\n\n        $('#rootDirs').on('change', () => {\n            $.rootDirCheck();\n        });\n\n        $('#showsortdirection').on('change', function () {\n            $('#container').isotope({\n                sortAscending: this.value === 'asc'\n            });\n        });\n\n        $('#container').isotope({\n            sortBy: 'original-order',\n            layoutMode: 'fitRows',\n            getSortData: {\n                name(itemElem) {\n                    const name = $(itemElem).attr('data-name') || '';\n                    return (MEDUSA.config.sortArticle ? name : name.replace(/^((?:The|A|An)\\s)/i, '')).toLowerCase();\n                },\n                rating: '[data-rating] parseInt',\n                votes: '[data-votes] parseInt'\n            }\n        }).on('layoutComplete arrangeComplete removeComplete', () => {\n            imgLazyLoad.update();\n            imgLazyLoad.handleScroll();\n        });\n    };\n\n    $.fn.loadRemoteShows = function (path, loadingTxt, errorTxt) {\n        $(this).html('<img id=\"searchingAnim\" src=\"images/loading32' + MEDUSA.config.themeSpinner + '.gif\" height=\"32\" width=\"32\" />&nbsp;' + loadingTxt);\n        $(this).load(path + ' #container', function (response, status) {\n            if (status === 'error') {\n                $(this).empty().html(errorTxt);\n            } else {\n                $.initRemoteShowGrid();\n                imgLazyLoad.update();\n                imgLazyLoad.handleScroll();\n            }\n        });\n    };\n\n    /*\n     * Blacklist a show by series id.\n     */\n    $.initBlackListShowById = function () {\n        $(document.body).on('click', 'button[data-blacklist-show]', function (e) {\n            e.preventDefault();\n\n            if ($(this).is(':disabled')) {\n                return false;\n            }\n\n            $(this).html('Blacklisted').prop('disabled', true);\n            $(this).parent().find('button[data-add-show]').prop('disabled', true);\n\n            $.get('addShows/addShowToBlacklist?seriesid=' + $(this).attr('data-indexer-id'));\n            return false;\n        });\n    };\n\n    /*\n     * Adds show by indexer and indexer_id with a number of optional parameters\n     * The show can be added as an anime show by providing the data attribute: data-isanime=\"1\"\n     */\n    $.initAddShowById = function () {\n        $(document.body).on('click', 'button[data-add-show]', function (e) {\n            e.preventDefault();\n\n            if ($(this).is(':disabled')) {\n                return false;\n            }\n\n            $(this).html('Added').prop('disabled', true);\n            $(this).parent().find('button[data-blacklist-show]').prop('disabled', true);\n\n            const anyQualArray = [];\n            const bestQualArray = [];\n            $('select[name=\"allowed_qualities\"] option:selected').each((i, d) => {\n                anyQualArray.push($(d).val());\n            });\n            $('select[name=\"preferred_qualities\"] option:selected').each((i, d) => {\n                bestQualArray.push($(d).val());\n            });\n\n            const configureShowOptions = $('#configure_show_options').prop('checked');\n\n            $.get('addShows/addShowByID?indexername=' + $(this).attr('data-indexer') + '&seriesid=' + $(this).attr('data-indexer-id'), {\n                root_dir: $('#rootDirs option:selected').val(), // eslint-disable-line camelcase\n                configure_show_options: configureShowOptions, // eslint-disable-line camelcase\n                show_name: $(this).attr('data-show-name'), // eslint-disable-line camelcase\n                quality_preset: $('select[name=\"quality_preset\"]').val(), // eslint-disable-line camelcase\n                default_status: $('#statusSelect').val(), // eslint-disable-line camelcase\n                any_qualities: anyQualArray.join(','), // eslint-disable-line camelcase\n                best_qualities: bestQualArray.join(','), // eslint-disable-line camelcase\n                season_folders: $('#season_folders').prop('checked'), // eslint-disable-line camelcase\n                subtitles: $('#subtitles').prop('checked'),\n                anime: $('#anime').prop('checked'),\n                scene: $('#scene').prop('checked'),\n                default_status_after: $('#statusSelectAfter').val() // eslint-disable-line camelcase\n            });\n            return false;\n        });\n    };\n\n    $.updateBlackWhiteList = function (showName) {\n        $('#white').children().remove();\n        $('#black').children().remove();\n        $('#pool').children().remove();\n\n        if ($('#anime').prop('checked') && showName) {\n            $('#blackwhitelist').show();\n            if (showName) {\n                $.getJSON('home/fetch_releasegroups', {\n                    series_name: showName // eslint-disable-line camelcase\n                }, data => {\n                    if (data.result === 'success') {\n                        $.each(data.groups, (i, group) => {\n                            const option = $('<option>');\n                            option.prop('value', group.name);\n                            option.html(group.name + ' | ' + group.rating + ' | ' + group.range);\n                            option.appendTo('#pool');\n                        });\n                    }\n                });\n            }\n        } else {\n            $('#blackwhitelist').hide();\n        }\n    };\n};\n\n},{}]},{},[1]);\n"],"file":"init.js"}
\ No newline at end of file
+{"version":3,"names":[],"mappings":"","sources":["js/add-shows/init.js"],"sourcesContent":["(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c=\"function\"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error(\"Cannot find module '\"+i+\"'\");throw a.code=\"MODULE_NOT_FOUND\",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u=\"function\"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){\nMEDUSA.addShows.init = function () {\n    $('#tabs').tabs({\n        collapsible: true,\n        selected: MEDUSA.config.sortArticle ? -1 : 0\n    });\n\n    const imgLazyLoad = new LazyLoad({\n        // Example of options object -> see options section\n        threshold: 500\n    });\n\n    $.initRemoteShowGrid = function () {\n        // Set defaults on page load\n        imgLazyLoad.update();\n        imgLazyLoad.handleScroll();\n        $('#showsort').val('original');\n        $('#showsortdirection').val('asc');\n\n        $('#showsort').on('change', function () {\n            let sortCriteria;\n            switch (this.value) {\n                case 'original':\n                    sortCriteria = 'original-order';\n                    break;\n                case 'rating':\n                    /* Randomise, else the rating_votes can already\n                     * have sorted leaving this with nothing to do.\n                     */\n                    $('#container').isotope({ sortBy: 'random' });\n                    sortCriteria = 'rating';\n                    break;\n                case 'rating_votes':\n                    sortCriteria = ['rating', 'votes'];\n                    break;\n                case 'votes':\n                    sortCriteria = 'votes';\n                    break;\n                default:\n                    sortCriteria = 'name';\n                    break;\n            }\n            $('#container').isotope({\n                sortBy: sortCriteria\n            });\n        });\n\n        $(document.body).on('change', '#rootDirs', () => {\n            $.rootDirCheck();\n        });\n\n        $('#showsortdirection').on('change', function () {\n            $('#container').isotope({\n                sortAscending: this.value === 'asc'\n            });\n        });\n\n        $('#container').isotope({\n            sortBy: 'original-order',\n            layoutMode: 'fitRows',\n            getSortData: {\n                name(itemElem) {\n                    const name = $(itemElem).attr('data-name') || '';\n                    return (MEDUSA.config.sortArticle ? name : name.replace(/^((?:The|A|An)\\s)/i, '')).toLowerCase();\n                },\n                rating: '[data-rating] parseInt',\n                votes: '[data-votes] parseInt'\n            }\n        }).on('layoutComplete arrangeComplete removeComplete', () => {\n            imgLazyLoad.update();\n            imgLazyLoad.handleScroll();\n        });\n    };\n\n    $.fn.loadRemoteShows = function (path, loadingTxt, errorTxt) {\n        $(this).html('<img id=\"searchingAnim\" src=\"images/loading32' + MEDUSA.config.themeSpinner + '.gif\" height=\"32\" width=\"32\" />&nbsp;' + loadingTxt);\n        $(this).load(path + ' #container', function (response, status) {\n            if (status === 'error') {\n                $(this).empty().html(errorTxt);\n            } else {\n                $.initRemoteShowGrid();\n                imgLazyLoad.update();\n                imgLazyLoad.handleScroll();\n            }\n        });\n    };\n\n    /*\n     * Blacklist a show by series id.\n     */\n    $.initBlackListShowById = function () {\n        $(document.body).on('click', 'button[data-blacklist-show]', function (e) {\n            e.preventDefault();\n\n            if ($(this).is(':disabled')) {\n                return false;\n            }\n\n            $(this).html('Blacklisted').prop('disabled', true);\n            $(this).parent().find('button[data-add-show]').prop('disabled', true);\n\n            $.get('addShows/addShowToBlacklist?seriesid=' + $(this).attr('data-indexer-id'));\n            return false;\n        });\n    };\n\n    /*\n     * Adds show by indexer and indexer_id with a number of optional parameters\n     * The show can be added as an anime show by providing the data attribute: data-isanime=\"1\"\n     */\n    $.initAddShowById = function () {\n        $(document.body).on('click', 'button[data-add-show]', function (e) {\n            e.preventDefault();\n\n            if ($(this).is(':disabled')) {\n                return false;\n            }\n\n            $(this).html('Added').prop('disabled', true);\n            $(this).parent().find('button[data-blacklist-show]').prop('disabled', true);\n\n            const anyQualArray = [];\n            const bestQualArray = [];\n            $('select[name=\"allowed_qualities\"] option:selected').each((i, d) => {\n                anyQualArray.push($(d).val());\n            });\n            $('select[name=\"preferred_qualities\"] option:selected').each((i, d) => {\n                bestQualArray.push($(d).val());\n            });\n\n            const configureShowOptions = $('#configure_show_options').prop('checked');\n\n            $.get('addShows/addShowByID?indexername=' + $(this).attr('data-indexer') + '&seriesid=' + $(this).attr('data-indexer-id'), {\n                root_dir: $('#rootDirs option:selected').val(), // eslint-disable-line camelcase\n                configure_show_options: configureShowOptions, // eslint-disable-line camelcase\n                show_name: $(this).attr('data-show-name'), // eslint-disable-line camelcase\n                quality_preset: $('select[name=\"quality_preset\"]').val(), // eslint-disable-line camelcase\n                default_status: $('#statusSelect').val(), // eslint-disable-line camelcase\n                any_qualities: anyQualArray.join(','), // eslint-disable-line camelcase\n                best_qualities: bestQualArray.join(','), // eslint-disable-line camelcase\n                season_folders: $('#season_folders').prop('checked'), // eslint-disable-line camelcase\n                subtitles: $('#subtitles').prop('checked'),\n                anime: $('#anime').prop('checked'),\n                scene: $('#scene').prop('checked'),\n                default_status_after: $('#statusSelectAfter').val() // eslint-disable-line camelcase\n            });\n            return false;\n        });\n    };\n\n    $.updateBlackWhiteList = function (showName) {\n        $('#white').children().remove();\n        $('#black').children().remove();\n        $('#pool').children().remove();\n\n        if ($('#anime').prop('checked') && showName) {\n            $('#blackwhitelist').show();\n            if (showName) {\n                $.getJSON('home/fetch_releasegroups', {\n                    series_name: showName // eslint-disable-line camelcase\n                }, data => {\n                    if (data.result === 'success') {\n                        $.each(data.groups, (i, group) => {\n                            const option = $('<option>');\n                            option.prop('value', group.name);\n                            option.html(group.name + ' | ' + group.rating + ' | ' + group.range);\n                            option.appendTo('#pool');\n                        });\n                    }\n                });\n            }\n        } else {\n            $('#blackwhitelist').hide();\n        }\n    };\n};\n\n},{}]},{},[1]);\n"],"file":"init.js"}
\ No newline at end of file
diff --git a/themes/dark/templates/addShows_recommended.mako b/themes/dark/templates/addShows_recommended.mako
index 823e567db78..201e9e764d4 100644
--- a/themes/dark/templates/addShows_recommended.mako
+++ b/themes/dark/templates/addShows_recommended.mako
@@ -1,7 +1,4 @@
 <%inherit file="/layouts/main.mako"/>
-<%!
-    from medusa import app
-%>
 <%block name="scripts">
 % if enable_anime_options:
     <script type="text/javascript" src="js/blackwhite.js?${sbPID}"></script>
@@ -12,7 +9,9 @@ const startVue = () => {
     window.app = new Vue({
         el: '#vue-wrap',
         data() {
-            return {};
+            return {
+                rootDirs: []
+            };
         }
     });
 };
@@ -50,7 +49,7 @@ const startVue = () => {
                                 <li><app-link href="addShows/${realpage + '/'}#tabs-2">Customize Options</app-link></li>
                             </ul>
                             <div id="tabs-1" class="existingtabs">
-                                <%include file="/inc_rootDirs.mako"/>
+                                <root-dirs @update:root-dirs="rootDirs = $event"></root-dirs>
                                 <br/>
                             </div>
                             <div id="tabs-2" class="existingtabs">
diff --git a/themes/dark/templates/addShows_trendingShows.mako b/themes/dark/templates/addShows_trendingShows.mako
index 01f2bf63c00..b0332ddc408 100644
--- a/themes/dark/templates/addShows_trendingShows.mako
+++ b/themes/dark/templates/addShows_trendingShows.mako
@@ -12,7 +12,9 @@ const startVue = () => {
     window.app = new Vue({
         el: '#vue-wrap',
         data() {
-            return {};
+            return {
+                rootDirs: []
+            };
         }
     });
 };
@@ -50,7 +52,7 @@ const startVue = () => {
                             <li><app-link id="trakt-tab-2" href="addShows/${realpage + '/'}?traktList=${traktList}#tabs-2">Customize Options</app-link></li>
                         </ul>
                         <div id="tabs-1" class="existingtabs">
-                            <%include file="/inc_rootDirs.mako"/>
+                            <root-dirs @update:root-dirs="rootDirs = $event"></root-dirs>
                             <br/>
                         </div>
                         <div id="tabs-2" class="existingtabs">
diff --git a/themes/light/assets/js/add-shows/init.js b/themes/light/assets/js/add-shows/init.js
index ee1e20e50b0..b9d6c0c394f 100644
--- a/themes/light/assets/js/add-shows/init.js
+++ b/themes/light/assets/js/add-shows/init.js
@@ -44,7 +44,7 @@ MEDUSA.addShows.init = function() {
             });
         });
 
-        $('#rootDirs').on('change', () => {
+        $(document.body).on('change', '#rootDirs', () => {
             $.rootDirCheck();
         });
 
diff --git a/themes/light/assets/js/add-shows/init.js.map b/themes/light/assets/js/add-shows/init.js.map
index 27fb4c74117..6bac0cb213d 100644
--- a/themes/light/assets/js/add-shows/init.js.map
+++ b/themes/light/assets/js/add-shows/init.js.map
@@ -1 +1 @@
-{"version":3,"names":[],"mappings":"","sources":["js/add-shows/init.js"],"sourcesContent":["(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c=\"function\"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error(\"Cannot find module '\"+i+\"'\");throw a.code=\"MODULE_NOT_FOUND\",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u=\"function\"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){\nMEDUSA.addShows.init = function () {\n    $('#tabs').tabs({\n        collapsible: true,\n        selected: MEDUSA.config.sortArticle ? -1 : 0\n    });\n\n    const imgLazyLoad = new LazyLoad({\n        // Example of options object -> see options section\n        threshold: 500\n    });\n\n    $.initRemoteShowGrid = function () {\n        // Set defaults on page load\n        imgLazyLoad.update();\n        imgLazyLoad.handleScroll();\n        $('#showsort').val('original');\n        $('#showsortdirection').val('asc');\n\n        $('#showsort').on('change', function () {\n            let sortCriteria;\n            switch (this.value) {\n                case 'original':\n                    sortCriteria = 'original-order';\n                    break;\n                case 'rating':\n                    /* Randomise, else the rating_votes can already\n                     * have sorted leaving this with nothing to do.\n                     */\n                    $('#container').isotope({ sortBy: 'random' });\n                    sortCriteria = 'rating';\n                    break;\n                case 'rating_votes':\n                    sortCriteria = ['rating', 'votes'];\n                    break;\n                case 'votes':\n                    sortCriteria = 'votes';\n                    break;\n                default:\n                    sortCriteria = 'name';\n                    break;\n            }\n            $('#container').isotope({\n                sortBy: sortCriteria\n            });\n        });\n\n        $('#rootDirs').on('change', () => {\n            $.rootDirCheck();\n        });\n\n        $('#showsortdirection').on('change', function () {\n            $('#container').isotope({\n                sortAscending: this.value === 'asc'\n            });\n        });\n\n        $('#container').isotope({\n            sortBy: 'original-order',\n            layoutMode: 'fitRows',\n            getSortData: {\n                name(itemElem) {\n                    const name = $(itemElem).attr('data-name') || '';\n                    return (MEDUSA.config.sortArticle ? name : name.replace(/^((?:The|A|An)\\s)/i, '')).toLowerCase();\n                },\n                rating: '[data-rating] parseInt',\n                votes: '[data-votes] parseInt'\n            }\n        }).on('layoutComplete arrangeComplete removeComplete', () => {\n            imgLazyLoad.update();\n            imgLazyLoad.handleScroll();\n        });\n    };\n\n    $.fn.loadRemoteShows = function (path, loadingTxt, errorTxt) {\n        $(this).html('<img id=\"searchingAnim\" src=\"images/loading32' + MEDUSA.config.themeSpinner + '.gif\" height=\"32\" width=\"32\" />&nbsp;' + loadingTxt);\n        $(this).load(path + ' #container', function (response, status) {\n            if (status === 'error') {\n                $(this).empty().html(errorTxt);\n            } else {\n                $.initRemoteShowGrid();\n                imgLazyLoad.update();\n                imgLazyLoad.handleScroll();\n            }\n        });\n    };\n\n    /*\n     * Blacklist a show by series id.\n     */\n    $.initBlackListShowById = function () {\n        $(document.body).on('click', 'button[data-blacklist-show]', function (e) {\n            e.preventDefault();\n\n            if ($(this).is(':disabled')) {\n                return false;\n            }\n\n            $(this).html('Blacklisted').prop('disabled', true);\n            $(this).parent().find('button[data-add-show]').prop('disabled', true);\n\n            $.get('addShows/addShowToBlacklist?seriesid=' + $(this).attr('data-indexer-id'));\n            return false;\n        });\n    };\n\n    /*\n     * Adds show by indexer and indexer_id with a number of optional parameters\n     * The show can be added as an anime show by providing the data attribute: data-isanime=\"1\"\n     */\n    $.initAddShowById = function () {\n        $(document.body).on('click', 'button[data-add-show]', function (e) {\n            e.preventDefault();\n\n            if ($(this).is(':disabled')) {\n                return false;\n            }\n\n            $(this).html('Added').prop('disabled', true);\n            $(this).parent().find('button[data-blacklist-show]').prop('disabled', true);\n\n            const anyQualArray = [];\n            const bestQualArray = [];\n            $('select[name=\"allowed_qualities\"] option:selected').each((i, d) => {\n                anyQualArray.push($(d).val());\n            });\n            $('select[name=\"preferred_qualities\"] option:selected').each((i, d) => {\n                bestQualArray.push($(d).val());\n            });\n\n            const configureShowOptions = $('#configure_show_options').prop('checked');\n\n            $.get('addShows/addShowByID?indexername=' + $(this).attr('data-indexer') + '&seriesid=' + $(this).attr('data-indexer-id'), {\n                root_dir: $('#rootDirs option:selected').val(), // eslint-disable-line camelcase\n                configure_show_options: configureShowOptions, // eslint-disable-line camelcase\n                show_name: $(this).attr('data-show-name'), // eslint-disable-line camelcase\n                quality_preset: $('select[name=\"quality_preset\"]').val(), // eslint-disable-line camelcase\n                default_status: $('#statusSelect').val(), // eslint-disable-line camelcase\n                any_qualities: anyQualArray.join(','), // eslint-disable-line camelcase\n                best_qualities: bestQualArray.join(','), // eslint-disable-line camelcase\n                season_folders: $('#season_folders').prop('checked'), // eslint-disable-line camelcase\n                subtitles: $('#subtitles').prop('checked'),\n                anime: $('#anime').prop('checked'),\n                scene: $('#scene').prop('checked'),\n                default_status_after: $('#statusSelectAfter').val() // eslint-disable-line camelcase\n            });\n            return false;\n        });\n    };\n\n    $.updateBlackWhiteList = function (showName) {\n        $('#white').children().remove();\n        $('#black').children().remove();\n        $('#pool').children().remove();\n\n        if ($('#anime').prop('checked') && showName) {\n            $('#blackwhitelist').show();\n            if (showName) {\n                $.getJSON('home/fetch_releasegroups', {\n                    series_name: showName // eslint-disable-line camelcase\n                }, data => {\n                    if (data.result === 'success') {\n                        $.each(data.groups, (i, group) => {\n                            const option = $('<option>');\n                            option.prop('value', group.name);\n                            option.html(group.name + ' | ' + group.rating + ' | ' + group.range);\n                            option.appendTo('#pool');\n                        });\n                    }\n                });\n            }\n        } else {\n            $('#blackwhitelist').hide();\n        }\n    };\n};\n\n},{}]},{},[1]);\n"],"file":"init.js"}
\ No newline at end of file
+{"version":3,"names":[],"mappings":"","sources":["js/add-shows/init.js"],"sourcesContent":["(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c=\"function\"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error(\"Cannot find module '\"+i+\"'\");throw a.code=\"MODULE_NOT_FOUND\",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u=\"function\"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){\nMEDUSA.addShows.init = function () {\n    $('#tabs').tabs({\n        collapsible: true,\n        selected: MEDUSA.config.sortArticle ? -1 : 0\n    });\n\n    const imgLazyLoad = new LazyLoad({\n        // Example of options object -> see options section\n        threshold: 500\n    });\n\n    $.initRemoteShowGrid = function () {\n        // Set defaults on page load\n        imgLazyLoad.update();\n        imgLazyLoad.handleScroll();\n        $('#showsort').val('original');\n        $('#showsortdirection').val('asc');\n\n        $('#showsort').on('change', function () {\n            let sortCriteria;\n            switch (this.value) {\n                case 'original':\n                    sortCriteria = 'original-order';\n                    break;\n                case 'rating':\n                    /* Randomise, else the rating_votes can already\n                     * have sorted leaving this with nothing to do.\n                     */\n                    $('#container').isotope({ sortBy: 'random' });\n                    sortCriteria = 'rating';\n                    break;\n                case 'rating_votes':\n                    sortCriteria = ['rating', 'votes'];\n                    break;\n                case 'votes':\n                    sortCriteria = 'votes';\n                    break;\n                default:\n                    sortCriteria = 'name';\n                    break;\n            }\n            $('#container').isotope({\n                sortBy: sortCriteria\n            });\n        });\n\n        $(document.body).on('change', '#rootDirs', () => {\n            $.rootDirCheck();\n        });\n\n        $('#showsortdirection').on('change', function () {\n            $('#container').isotope({\n                sortAscending: this.value === 'asc'\n            });\n        });\n\n        $('#container').isotope({\n            sortBy: 'original-order',\n            layoutMode: 'fitRows',\n            getSortData: {\n                name(itemElem) {\n                    const name = $(itemElem).attr('data-name') || '';\n                    return (MEDUSA.config.sortArticle ? name : name.replace(/^((?:The|A|An)\\s)/i, '')).toLowerCase();\n                },\n                rating: '[data-rating] parseInt',\n                votes: '[data-votes] parseInt'\n            }\n        }).on('layoutComplete arrangeComplete removeComplete', () => {\n            imgLazyLoad.update();\n            imgLazyLoad.handleScroll();\n        });\n    };\n\n    $.fn.loadRemoteShows = function (path, loadingTxt, errorTxt) {\n        $(this).html('<img id=\"searchingAnim\" src=\"images/loading32' + MEDUSA.config.themeSpinner + '.gif\" height=\"32\" width=\"32\" />&nbsp;' + loadingTxt);\n        $(this).load(path + ' #container', function (response, status) {\n            if (status === 'error') {\n                $(this).empty().html(errorTxt);\n            } else {\n                $.initRemoteShowGrid();\n                imgLazyLoad.update();\n                imgLazyLoad.handleScroll();\n            }\n        });\n    };\n\n    /*\n     * Blacklist a show by series id.\n     */\n    $.initBlackListShowById = function () {\n        $(document.body).on('click', 'button[data-blacklist-show]', function (e) {\n            e.preventDefault();\n\n            if ($(this).is(':disabled')) {\n                return false;\n            }\n\n            $(this).html('Blacklisted').prop('disabled', true);\n            $(this).parent().find('button[data-add-show]').prop('disabled', true);\n\n            $.get('addShows/addShowToBlacklist?seriesid=' + $(this).attr('data-indexer-id'));\n            return false;\n        });\n    };\n\n    /*\n     * Adds show by indexer and indexer_id with a number of optional parameters\n     * The show can be added as an anime show by providing the data attribute: data-isanime=\"1\"\n     */\n    $.initAddShowById = function () {\n        $(document.body).on('click', 'button[data-add-show]', function (e) {\n            e.preventDefault();\n\n            if ($(this).is(':disabled')) {\n                return false;\n            }\n\n            $(this).html('Added').prop('disabled', true);\n            $(this).parent().find('button[data-blacklist-show]').prop('disabled', true);\n\n            const anyQualArray = [];\n            const bestQualArray = [];\n            $('select[name=\"allowed_qualities\"] option:selected').each((i, d) => {\n                anyQualArray.push($(d).val());\n            });\n            $('select[name=\"preferred_qualities\"] option:selected').each((i, d) => {\n                bestQualArray.push($(d).val());\n            });\n\n            const configureShowOptions = $('#configure_show_options').prop('checked');\n\n            $.get('addShows/addShowByID?indexername=' + $(this).attr('data-indexer') + '&seriesid=' + $(this).attr('data-indexer-id'), {\n                root_dir: $('#rootDirs option:selected').val(), // eslint-disable-line camelcase\n                configure_show_options: configureShowOptions, // eslint-disable-line camelcase\n                show_name: $(this).attr('data-show-name'), // eslint-disable-line camelcase\n                quality_preset: $('select[name=\"quality_preset\"]').val(), // eslint-disable-line camelcase\n                default_status: $('#statusSelect').val(), // eslint-disable-line camelcase\n                any_qualities: anyQualArray.join(','), // eslint-disable-line camelcase\n                best_qualities: bestQualArray.join(','), // eslint-disable-line camelcase\n                season_folders: $('#season_folders').prop('checked'), // eslint-disable-line camelcase\n                subtitles: $('#subtitles').prop('checked'),\n                anime: $('#anime').prop('checked'),\n                scene: $('#scene').prop('checked'),\n                default_status_after: $('#statusSelectAfter').val() // eslint-disable-line camelcase\n            });\n            return false;\n        });\n    };\n\n    $.updateBlackWhiteList = function (showName) {\n        $('#white').children().remove();\n        $('#black').children().remove();\n        $('#pool').children().remove();\n\n        if ($('#anime').prop('checked') && showName) {\n            $('#blackwhitelist').show();\n            if (showName) {\n                $.getJSON('home/fetch_releasegroups', {\n                    series_name: showName // eslint-disable-line camelcase\n                }, data => {\n                    if (data.result === 'success') {\n                        $.each(data.groups, (i, group) => {\n                            const option = $('<option>');\n                            option.prop('value', group.name);\n                            option.html(group.name + ' | ' + group.rating + ' | ' + group.range);\n                            option.appendTo('#pool');\n                        });\n                    }\n                });\n            }\n        } else {\n            $('#blackwhitelist').hide();\n        }\n    };\n};\n\n},{}]},{},[1]);\n"],"file":"init.js"}
\ No newline at end of file
diff --git a/themes/light/templates/addShows_recommended.mako b/themes/light/templates/addShows_recommended.mako
index 823e567db78..201e9e764d4 100644
--- a/themes/light/templates/addShows_recommended.mako
+++ b/themes/light/templates/addShows_recommended.mako
@@ -1,7 +1,4 @@
 <%inherit file="/layouts/main.mako"/>
-<%!
-    from medusa import app
-%>
 <%block name="scripts">
 % if enable_anime_options:
     <script type="text/javascript" src="js/blackwhite.js?${sbPID}"></script>
@@ -12,7 +9,9 @@ const startVue = () => {
     window.app = new Vue({
         el: '#vue-wrap',
         data() {
-            return {};
+            return {
+                rootDirs: []
+            };
         }
     });
 };
@@ -50,7 +49,7 @@ const startVue = () => {
                                 <li><app-link href="addShows/${realpage + '/'}#tabs-2">Customize Options</app-link></li>
                             </ul>
                             <div id="tabs-1" class="existingtabs">
-                                <%include file="/inc_rootDirs.mako"/>
+                                <root-dirs @update:root-dirs="rootDirs = $event"></root-dirs>
                                 <br/>
                             </div>
                             <div id="tabs-2" class="existingtabs">
diff --git a/themes/light/templates/addShows_trendingShows.mako b/themes/light/templates/addShows_trendingShows.mako
index 01f2bf63c00..b0332ddc408 100644
--- a/themes/light/templates/addShows_trendingShows.mako
+++ b/themes/light/templates/addShows_trendingShows.mako
@@ -12,7 +12,9 @@ const startVue = () => {
     window.app = new Vue({
         el: '#vue-wrap',
         data() {
-            return {};
+            return {
+                rootDirs: []
+            };
         }
     });
 };
@@ -50,7 +52,7 @@ const startVue = () => {
                             <li><app-link id="trakt-tab-2" href="addShows/${realpage + '/'}?traktList=${traktList}#tabs-2">Customize Options</app-link></li>
                         </ul>
                         <div id="tabs-1" class="existingtabs">
-                            <%include file="/inc_rootDirs.mako"/>
+                            <root-dirs @update:root-dirs="rootDirs = $event"></root-dirs>
                             <br/>
                         </div>
                         <div id="tabs-2" class="existingtabs">