diff --git a/composables/useLocalizedData.ts b/composables/useLocalizedData.ts
new file mode 100644
index 0000000..f438629
--- /dev/null
+++ b/composables/useLocalizedData.ts
@@ -0,0 +1,12 @@
+export default async function useLocalizedData<T>(producer: (locale: string) => Promise<T>) {
+  const { currentLocale } = useLocale();
+  const data = ref(await producer(currentLocale.value));
+  watch(currentLocale, async () => {
+    data.value = await producer(currentLocale.value);
+  });
+
+  return {
+    currentLocale,
+    data
+  };
+}
\ No newline at end of file
diff --git a/pages/champions/[id].vue b/pages/champions/[id].vue
index 2f873d0..a5b577e 100644
--- a/pages/champions/[id].vue
+++ b/pages/champions/[id].vue
@@ -5,14 +5,9 @@ const route = useRoute();
 const id = route.params.id as unknown;
 
 const { client } = useClient();
-const { currentLocale } = useLocale();
-const getChampion = async () => await client.champions.getAsync(id as number, {locale: currentLocale.value, version: "latest"});
+const { currentLocale, data: champion } = await useLocalizedData(async (x) => await client.champions.getAsync(id as number, {locale: x, version: "latest"}));
 
-const champion = ref(await getChampion());
 const data = computed(() => `https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champions/${champion.value.id}.json`);
-watch(currentLocale, async () => {
-  champion.value = await getChampion();
-});
 
 const currentSkin = ref(champion.value.skins[0]);
 const swapCurrentSkin = (id: number) => {
diff --git a/pages/champions/index.vue b/pages/champions/index.vue
index 9f93dc3..f69a101 100644
--- a/pages/champions/index.vue
+++ b/pages/champions/index.vue
@@ -1,17 +1,11 @@
 <script setup lang="ts">
 const { client } = useClient();
 const { currentLocale } = useLocale();
-const getSummaries = async () => (await client.championSummaries.listAsync({locale: currentLocale.value, version: "latest"}))
-    .filter((x) => x.id != -1) // Remove placeholder champion
-    .sort((a, b) => a.name.localeCompare(b.name));
-const getSkins = async () => await client.skins.listAsync({locale: currentLocale.value, version: "latest"});
 
-const summaries = ref(await getSummaries());
-const skins = ref(await getSkins());
-watch(currentLocale, async () => {
-    summaries.value = await getSummaries();
-    skins.value = await getSkins();
-});
+const { data: summaries } = await useLocalizedData(async (x) => (await client.championSummaries.listAsync({locale: x, version: "latest"}))
+    .filter((x) => x.id != -1) // Remove placeholder champion
+    .sort((a, b) => a.name.localeCompare(b.name)));
+const { data: skins } = await useLocalizedData(async (x) => await client.skins.listAsync({locale: x, version: "latest"}));
 
 const { query, results } = useQueryable(summaries, (x) => x.id, (x) => x.name);
 </script>
diff --git a/pages/cherry-augments/index.vue b/pages/cherry-augments/index.vue
index cfdbd26..28b65a6 100644
--- a/pages/cherry-augments/index.vue
+++ b/pages/cherry-augments/index.vue
@@ -1,14 +1,9 @@
 <script setup lang="ts">
 const { client } = useClient();
-const { currentLocale } = useLocale();
-const getCherryAugments = async () => (await client.cherryAugments.listAsync({locale: currentLocale.value, version: "latest"}))
-  .sort((a, b) => a.id - b.id);
-
-const cherryAugments = ref(await getCherryAugments());
-watch (currentLocale, async() => {
-  cherryAugments.value = await getCherryAugments();
-});
 
+const { data: cherryAugments } = await useLocalizedData(async (x) => (await client.cherryAugments.listAsync({locale: x, version: "latest"}))
+  .sort((a, b) => a.id - b.id));
+  
 const { query, results } = useQueryable(cherryAugments, (x) => x.id, (x) => x.nameTRA);
 </script>
 
diff --git a/pages/companions/index.vue b/pages/companions/index.vue
index a494140..ef1234c 100644
--- a/pages/companions/index.vue
+++ b/pages/companions/index.vue
@@ -1,13 +1,8 @@
 <script setup lang="ts">
 const { client } = useClient();
-const { currentLocale } = useLocale();
-const getCompanions = async () => (await client.companions.listAsync({locale: currentLocale.value, version: "latest"}))
-.sort((a, b) => a.itemId - b.itemId);
 
-const companions = ref(await getCompanions());
-watch(currentLocale, async() => {
-  companions.value = await getCompanions();
-});
+const { data: companions } = await useLocalizedData(async (x) => (await client.companions.listAsync({locale: x, version: "latest"}))
+.sort((a, b) => a.itemId - b.itemId));
 
 const { query, paginate } = useQueryable(companions, (x) => x.itemId, (x) => x.name);
 const pagination = paginate(100);
diff --git a/pages/items/[id].vue b/pages/items/[id].vue
index 1bc649a..7d36d26 100644
--- a/pages/items/[id].vue
+++ b/pages/items/[id].vue
@@ -5,10 +5,9 @@ const route = useRoute();
 const id = route.params.id as unknown;
 
 const { client } = useClient();
-const { currentLocale } = useLocale();
-const getItems = async () => await client.items.listAsync({locale: currentLocale.value, version: "latest"});
 
-const items = ref(await getItems());
+const { data: items } = await useLocalizedData(async (x) => await client.items.listAsync({locale: x, version: "latest"}));
+
 const _default = new Item({});
 
 const item = computed(() => items.value.find((x) => x.id == id) || _default);
diff --git a/pages/items/index.vue b/pages/items/index.vue
index c44ff26..409b7e4 100644
--- a/pages/items/index.vue
+++ b/pages/items/index.vue
@@ -1,12 +1,7 @@
 <script setup lang="ts">
 const { client } = useClient();
-const { currentLocale } = useLocale();
-const getItems = async () => await client.items.listAsync({ locale: currentLocale.value, version: "latest"});
 
-const items = ref(await getItems());
-watch(currentLocale, async () => {
-    items.value = await getItems();
-});
+const { data: items } = await useLocalizedData(async (x) => await client.items.listAsync({ locale: x, version: "latest"}));
 
 const { query, results } = useQueryable(items, (x) => x.id, (x) => x.name);
 </script>
diff --git a/pages/loots/index.vue b/pages/loots/index.vue
index 6dc269c..34f5d12 100644
--- a/pages/loots/index.vue
+++ b/pages/loots/index.vue
@@ -1,25 +1,22 @@
 <script setup lang="ts">
-import { Loot } from '../../core/models';
+import { Loot } from '~/core/models';
 
 const { client } = useClient();
-const { currentLocale } = useLocale();
 
 const query = ref("");
 const filter = ref("");
-const getLoots = async () => (await client.loots.listAsync({locale: currentLocale.value, version: "latest"}))
+
+const { data: loots } = await useLocalizedData(async (x) => (await client.loots.listAsync({locale: x, version: "latest"}))
   .sort((a, b) => a.id.localeCompare(b.id))
-  .filter((x) => x.id != "");
-const getSummaries = async () => await client.championSummaries.listAsync({locale: currentLocale.value, version: "latest"});
+  .filter((x) => x.id != ""));
+
+const { data: summaries } = await useLocalizedData(async (x) => await client.championSummaries.listAsync({locale: x, version: "latest"}));
 
 const clearFilter = () => filter.value = "";
 const applyFilter = (category: string) => filter.value = category;
 
-// Alphanumerically sort by id, remove null entries
-const loots = ref(await getLoots());
-
 const categories = new Set(loots.value.map((x) => x.type));
 
-const { isNumeric } = useIsNumeric();
 const pagination = computed(() => {
   let filtered = [];
   
@@ -30,19 +27,12 @@ const pagination = computed(() => {
   return usePagination(filtered, 100);
 });
 
-const summaries = ref(await getSummaries());
-
 const getLootImage = (loot: Loot) => {
   if (loot.type.includes('Statstone'))
     return summaries.value.find((x) => loot.name.toLowerCase().includes(x.name.toLowerCase()))?.getIcon({locale: "default", version: "latest"});
 
   return loot.getImage('latest');
 }
-
-watch(currentLocale, async() => {
-  loots.value = await getLoots();
-  summaries.value = await getSummaries();
-});
 </script>
 
 <template>  
diff --git a/pages/runes/index.vue b/pages/runes/index.vue
index 81ecddc..c53030d 100644
--- a/pages/runes/index.vue
+++ b/pages/runes/index.vue
@@ -1,13 +1,8 @@
 <script setup lang="ts">
 const { client } = useClient();
-const { currentLocale } = useLocale();
-const getRunes = async () => (await client.perks.listAsync({locale: currentLocale.value, version: "latest"}))
-.sort((a, b) => a.id - b.id)
 
-const runes = ref(await getRunes());
-watch(currentLocale, async() => {
-    runes.value = await getRunes();
-});
+const { data: runes } = await useLocalizedData(async (x) => (await client.perks.listAsync({locale: x, version: "latest"}))
+.sort((a, b) => a.id - b.id));
 
 const { query, results } = useQueryable(runes, (x) => x.id, (x) => x.name);
 </script>
diff --git a/pages/summoner-emotes/index.vue b/pages/summoner-emotes/index.vue
index 28ef07a..c01bf4f 100644
--- a/pages/summoner-emotes/index.vue
+++ b/pages/summoner-emotes/index.vue
@@ -1,13 +1,8 @@
 <script setup lang="ts">
 const { client } = useClient();
-const { currentLocale } = useLocale();
-const getEmotes = async () => (await client.summonerEmotes.listAsync({locale: currentLocale.value, version: "latest"}))
-.sort((a, b) => a.id - b.id);
 
-const emotes = ref(await getEmotes());
-watch(currentLocale, async() => {
-  emotes.value = await getEmotes();
-});
+const { data: emotes } = await useLocalizedData(async (x) => (await client.summonerEmotes.listAsync({locale: x, version: "latest"}))
+.sort((a, b) => a.id - b.id));
 
 const { query, paginate } = useQueryable(emotes, (x) => x.id, (x) => x.name);
 const pagination = paginate(100);
diff --git a/pages/summoner-icons/index.vue b/pages/summoner-icons/index.vue
index 2c77b8a..00776e1 100644
--- a/pages/summoner-icons/index.vue
+++ b/pages/summoner-icons/index.vue
@@ -1,13 +1,8 @@
 <script setup lang="ts">
 const { client } = useClient();
-const { currentLocale } = useLocale();
-const getIcons = async () => (await client.summonerIcons.listAsync({locale: currentLocale.value, version: "latest"}))
-.sort((a, b) => a.id - b.id);
 
-const icons = ref(await getIcons());
-watch(currentLocale, async() => {
-    icons.value = await getIcons();
-});
+const { data: icons } = await useLocalizedData(async (x) => (await client.summonerIcons.listAsync({locale: x, version: "latest"}))
+.sort((a, b) => a.id - b.id));
 
 const { query, paginate } = useQueryable(icons, (x) => x.id, (x) => x.title);
 const pagination = paginate(100);
diff --git a/pages/tft-damage-skins/index.vue b/pages/tft-damage-skins/index.vue
index ec806a1..b204bae 100644
--- a/pages/tft-damage-skins/index.vue
+++ b/pages/tft-damage-skins/index.vue
@@ -1,13 +1,8 @@
 <script setup lang="ts">
 const { client } = useClient();
-const { currentLocale } = useLocale();
-const getTftDamageSkins = async () => (await client.tftDamageSkins.listAsync({ locale: currentLocale.value, version: "latest"}))
-  .sort((a, b) => a.itemId - b.itemId);
 
-const tftDamageSkins = ref(await getTftDamageSkins());
-watch(currentLocale, async() => {
-  tftDamageSkins.value = await getTftDamageSkins();
-});
+const { currentLocale, data: tftDamageSkins } = await useLocalizedData(async (x) => (await client.tftDamageSkins.listAsync({ locale: x, version: "latest"}))
+  .sort((a, b) => a.itemId - b.itemId));
 
 const { query, results } = useQueryable(tftDamageSkins, (x) => x.itemId, (x) => x.name);
 </script>
diff --git a/pages/tft-items/index.vue b/pages/tft-items/index.vue
index 635d3ce..10e0b7f 100644
--- a/pages/tft-items/index.vue
+++ b/pages/tft-items/index.vue
@@ -1,12 +1,7 @@
 <script setup lang="ts">
 const { client } = useClient();
-const { currentLocale } = useLocale();
-const getTftItems = async() => await client.tftItems.listAsync({ locale: currentLocale.value, version: "latest"});
 
-const tftItems = ref(await getTftItems());
-watch(currentLocale, async() => {
-  tftItems.value = await getTftItems();
-});
+const { data: tftItems } = await useLocalizedData(async(x) => await client.tftItems.listAsync({ locale: x, version: "latest"}));
 </script>
 
 <template>
diff --git a/pages/tft-map-skins/index.vue b/pages/tft-map-skins/index.vue
index da27434..e66e38f 100644
--- a/pages/tft-map-skins/index.vue
+++ b/pages/tft-map-skins/index.vue
@@ -1,13 +1,8 @@
 <script setup lang="ts">
 const { client } = useClient();
-const { currentLocale } = useLocale();
-const getTftMapSkins = async () => (await client.tftMapSkins.listAsync({ locale: currentLocale.value, version: "latest"}))
-  .sort((a, b) => a.itemId - b.itemId);
 
-const tftMapSkins = ref(await getTftMapSkins());
-watch(currentLocale, async() => {
-  tftMapSkins.value = await getTftMapSkins();
-});
+const { data: tftMapSkins } = await useLocalizedData(async (x) => (await client.tftMapSkins.listAsync({ locale: x, version: "latest"}))
+  .sort((a, b) => a.itemId - b.itemId));
 
 const { query, results } = useQueryable(tftMapSkins, (x) => x.itemId, (x) => x.name);
 </script>
diff --git a/pages/ward-skins/index.vue b/pages/ward-skins/index.vue
index f1012ae..04101b5 100644
--- a/pages/ward-skins/index.vue
+++ b/pages/ward-skins/index.vue
@@ -1,12 +1,7 @@
 <script setup lang="ts">
 const { client } = useClient();
-const { currentLocale } = useLocale();
-const getSkins = async () => await client.wardSkins.listAsync({locale: currentLocale.value, version: "latest"});
 
-const skins = ref(await getSkins());
-watch(currentLocale, async() => {
-    skins.value = await getSkins();
-});
+const { data: skins } = await useLocalizedData(async (x) => await client.wardSkins.listAsync({locale: x, version: "latest"}));
 
 const { query, results } = useQueryable(skins, (x) => x.id, (x) => x.name);
 </script>