fix badges logos adaptation on theme change

components/BadgeSection.vue

@@ -18,7 +18,7 @@
           <Badge
             v-for="badge in item.badges"
             :title="badge.title"
-            :img="badge.logo"
+            :img="badge.logo.value"
             :subtitle="badge.subtitle"
             :details="badge.details"
             :small="badge.small ?? false"
@@ -43,34 +43,32 @@ import { useTheme } from 'vuetify'
 const theme = useTheme()
 const i18n = useI18n()
 
-// J'ai travaillé sur de très nombreux projets avec Python, depuis la version 2.7 jusqu'à la version 3.12: scripts variés, extensions QGis, projets web, librairies, utilitaires ou applications buraeautiques.
-
 const col1 = [
   {
     title: 'Languages',
     badges: [
       {
         title: 'Python',
-        logo: '/images/logos/python.svg',
+        logo: ref('/images/logos/python.svg'),
         subtitle: i18n.t('x_years', { years: 10 }),
         details: ''
       },
       {
         title: 'PHP',
-        logo: '/images/logos/php.svg',
+        logo: ref('/images/logos/php.svg'),
         subtitle: i18n.t('x_years', { years: 4 }),
         details: ''
       },
       {
         title:
           'Node.js',
-        logo: theme.global.name.value === 'light' ? '/images/logos/nodejs_light.svg' : '/images/logos/nodejs_dark.svg',
+        logo: computed(() => theme.global.name.value === 'light' ? '/images/logos/nodejs_light.svg' : '/images/logos/nodejs_dark.svg'),
         subtitle: i18n.t('x_years', { years: 5 }),
         details: ''
       },
       {
         title: 'C#',
-        logo: '/images/logos/csharp.png',
+        logo: ref('/images/logos/csharp.png'),
         subtitle: i18n.t('x_years', { years: 2 }),
         details: ''
       },
@@ -81,37 +79,37 @@ const col1 = [
     badges: [
       {
         'title': 'Symfony',
-        logo: '/images/logos/symfony.svg',
+        logo: ref('/images/logos/symfony.svg'),
         subtitle: i18n.t('x_years', { years: 10 }),
         details: ''
       },
       {
         'title': 'Vue.js',
-        logo: '/images/logos/vue.png',
+        logo: ref('/images/logos/vue.png'),
         subtitle: i18n.t('x_years', { years: 3 }),
         details: ''
       },
       {
         'title': 'Nuxt.js',
-        logo: '/images/logos/nuxt.svg',
+        logo: ref('/images/logos/nuxt.svg'),
         subtitle: i18n.t('x_years', { years: 3 }),
         details: ''
       },
       {
         'title': '.Net',
-        logo: '/images/logos/dotnet.svg',
+        logo: ref('/images/logos/dotnet.svg'),
         subtitle: i18n.t('x_years', { years: 2 }),
         details: ''
       },
       {
         'title': 'Jquery',
-        logo: theme.global.name.value === 'light' ? '/images/logos/jquery.png' : '/images/logos/jquery_dark.png',
+        logo: computed(() => theme.global.name.value === 'light' ? '/images/logos/jquery.png' : '/images/logos/jquery_dark.png'),
         subtitle: i18n.t('x_years', { years: 3 }),
         details: ''
       },
       {
         'title': 'Django',
-        logo: theme.global.name.value === 'light' ? '/images/logos/django-light.svg' : '/images/logos/django-dark.svg',
+        logo: computed(() => theme.global.name.value === 'light' ? '/images/logos/django-light.svg' : '/images/logos/django-dark.svg'),
         subtitle: i18n.t('x_years', { years: 4 }),
         details: ''
       },
@@ -125,37 +123,37 @@ const col2 = [
     badges: [
       {
         title: 'Mysql',
-        logo: '/images/logos/mysql.png',
+        logo: ref('/images/logos/mysql.png'),
         subtitle: i18n.t('x_years', { years: 6 }),
         details: ''
       },
       {
         title: 'MariaDb',
-        logo: theme.global.name.value === 'light' ? '/images/logos/mariadb.svg': '/images/logos/mariadb_dark.svg',
+        logo: computed(() => theme.global.name.value === 'light' ? '/images/logos/mariadb.svg': '/images/logos/mariadb_dark.svg'),
         subtitle: i18n.t('x_years', { years: 6 }),
         details: ''
       },
       {
         title: 'Postgresql',
-        logo: '/images/logos/postgresql.svg',
+        logo: ref('/images/logos/postgresql.svg'),
         subtitle: i18n.t('x_years', { years: 5 }),
         details: ''
       },
       {
         title: 'SQL-Server',
-        logo: '/images/logos/sql-server.svg',
+        logo: ref('/images/logos/sql-server.svg'),
         subtitle: i18n.t('x_years', { years: 6 }),
         details: ''
       },
       {
         title: 'Sqlite',
-        logo: '/images/logos/sqlite.svg',
+        logo: ref('/images/logos/sqlite.svg'),
         subtitle: i18n.t('x_years', { years: 5 }),
         details: ''
       },
       {
         title: 'Solr',
-        logo: theme.global.name.value === 'light' ? '/images/logos/solr_light.png' : '/images/logos/solr_dark.png',
+        logo: computed(() => theme.global.name.value === 'light' ? '/images/logos/solr_light.png' : '/images/logos/solr_dark.png'),
         subtitle: i18n.t('x_years', { years: 2 }),
         details: ''
       },
@@ -166,25 +164,25 @@ const col2 = [
     badges: [
       {
         'title': 'Docker',
-        logo: '/images/logos/docker.svg',
+        logo: ref('/images/logos/docker.svg'),
         subtitle: i18n.t('x_years', { years: 5 }),
         details: ''
       },
       {
         'title': 'Gitlab CI',
-        logo: '/images/logos/gitlab.svg',
+        logo: ref('/images/logos/gitlab.svg'),
         subtitle: i18n.t('x_years', { years: 8 }),
         details: ''
       },
       {
         'title': 'Github Actions',
-        logo: theme.global.name.value === 'light' ? '/images/logos/github-light.svg' : '/images/logos/github-dark.svg',
+        logo: computed(() => theme.global.name.value === 'light' ? '/images/logos/github-light.svg' : '/images/logos/github-dark.svg'),
         subtitle: i18n.t('x_years', { years: 3 }),
         details: ''
       },
       {
         'title': 'Jenkins',
-        logo: '/images/logos/jenkins.png',
+        logo: ref('/images/logos/jenkins.png'),
         subtitle: i18n.t('x_years', { years: 3 }),
         details: ''
       }
@@ -198,32 +196,32 @@ const col3 = [
     badges: [
       {
         title: 'Mercure (SSE)',
-        logo: '/images/logos/docker.svg',
+        logo: ref('/images/logos/docker.svg'),
         subtitle: i18n.t('x_years', { years: 5 }),
         details: ''
       },
       {
         title: 'Nextcloud',
-        logo: '/images/logos/gitlab.svg',
+        logo: ref('/images/logos/gitlab.svg'),
         subtitle: i18n.t('x_years', { years: 8 }),
         details: ''
       },
       {
         title: i18n.t('system_administration'),
-        logo: theme.global.name.value === 'light' ? '/images/command-line_light.png' : '/images/command-line_dark.png',
+        logo: computed(() => theme.global.name.value === 'light' ? '/images/command-line_light.png' : '/images/command-line_dark.png'),
         subtitle: i18n.t('x_years', { years: 8 }),
         details: '',
         small: true
       },
       {
         title: 'Git-Flow',
-        logo: theme.global.name.value === 'light' ? '/images/logos/git-flow-light.svg' : '/images/logos/git-flow-dark.svg',
+        logo: computed(() => theme.global.name.value === 'light' ? '/images/logos/git-flow-light.svg' : '/images/logos/git-flow-dark.svg'),
         subtitle: i18n.t('x_years', { years: 3 }),
         details: ''
       },
       {
         title: 'Typo3 (dev)',
-        logo: '/images/logos/typo3.png',
+        logo: ref('/images/logos/typo3.png'),
         subtitle: i18n.t('x_years', { years: 4 }),
         details: ''
       },
@@ -234,32 +232,32 @@ const col3 = [
     badges: [
       {
         title: 'Management',
-        logo: '/images/team-management.png',
+        logo: ref('/images/team-management.png'),
         subtitle: i18n.t('x_years', { years: 10 }),
         details: ''
       },
       {
         title: 'Product Owner',
-        logo: '/images/product-management.png',
+        logo: ref('/images/product-management.png'),
         subtitle: i18n.t('x_years', { years: 10 }),
         details: ''
       },
       {
         title: i18n.t('continuous_improvement'),
-        logo: '/images/continuous-improvement.png',
+        logo: ref('/images/continuous-improvement.png'),
         subtitle: i18n.t('x_years', { years: 9 }),
         details: '',
         small: true
       },
       {
         title: 'SCRUM',
-        logo: '/images/scrum.png',
+        logo: ref('/images/scrum.png'),
         subtitle: i18n.t('x_years', { years: 8 }),
         details: ''
       },
       {
         title: 'Tutoring',
-        logo: '/images/teacher.png',
+        logo: ref('/images/teacher.png'),
         subtitle: i18n.t('x_years', { years: 6 }),
         details: ''
       }