Quick solution:

projectDetails.vue

<template>
    <div>
        <div>
            <h1>{{ projectDetails.title }}</h1>
            <p>{{ projectDetails.description }}</p>
        </div>
    </div>
</template>

<script>
    import json from '@/json/projectDetails.json';

    export default {
        name: 'projectDetails',
        props: {
            name: String,
        },
        data() {
            return {
                projectDetails: Object.values(json).find(project => project.title === this.name),
            };
        },
    };
</script>

In my opinion, a better solution:

I don't get the idea that you keep project data in 2 separate JSON files. During compilation, both files are saved to the resulting JavaScript file. Isn't it better to keep this data in 1 file? You don't have to use all of your data in one place. The second thing, if you have a project listing then you can do routing with an optional segment, and depending on whether the segment has a value or not, display the listing or data of a particular project. Then you load project data only in one place, and when one project is selected, pass its data to the data rendering component of this project. Nowhere else do you need to load this JSON file.

routes.js

import home from '@/components/home.vue';
import about from '@/components/about.vue';
import work from '@/components/work.vue';

const routes = [
    {path: '/', name: 'home', component: home},
    {path: '/about', name: 'about', component: about},
    {path: '/work/:name?', name: 'work', component: work, props: true},
];

export default routes;

work.vue

<template>
    <div>
        <project-details v-if="currentProject" :project="currentProject"/>
        <projectLink v-else 
                     v-for="project in projects"
                     v-bind="project"
                     v-bind:key="project.projectName"
        />
    </div>
</template>

<script>
    import projectLink from './projectLink';
    import projectDetails from './projectDetails';
    import json from '@/json/projectLink.json';

    export default {
        name: 'work',
        props: {
            name: String,
        },
        data() {
            return {
                projects: Object.values(json),
            };
        },
        computed: {
            currentProject() {
                if (this.name) {
                    return this.projects.find(
                        project => project.projectName === this.name,
                    );
                }
            },
        },
        components: {
            projectLink,
            projectDetails,
        },
    };
</script>

projectDetails.vue

<template>
    <div>
        <div>
            <h1>{{ project.title }}</h1>
            <p>{{ project.description }}</p>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'projectDetails',
        props: {
            project: Object,
        },
    };
</script>

projectLink.vue (changed only one line)

<router-link v-if="projectName" :to="{ name: 'work', params: { name: projectName }}">

A full working example:

Vue.component("navigation", {
  template: "#navigation"
});

const Projects = {
  template: "#projects",
  props: ["projects"]
};
const Project = {
  template: "#project",
  props: ["project"]
};
const HomePage = {
  template: "#home"
};
const AboutPage = {
  template: "#about"
};
const WorkPage = {
  data() {
    return {
      projects: [{
          slug: "foo",
          name: "Foo",
          desc: "Fus Ro Dah"
        },
        {
          slug: "bar",
          name: "Bar",
          desc: "Lorem Ipsum"
        }
      ]
    };
  },
  props: {
    slug: String
  },
  template: "#work",
  components: {
    Projects,
    Project
  },
  computed: {
    currentProject() {
      if (this.slug) {
        return this.projects.find(project => project.slug === this.slug);
      }
    }
  }
};

const router = new VueRouter({
  routes: [{
      path: "/",
      name: "home",
      component: HomePage
    },
    {
      path: "/about",
      name: "about",
      component: AboutPage
    },
    {
      path: "/work/:slug?",
      name: "work",
      component: WorkPage,
      props: true
    }
  ]
});

new Vue({
  router,
  template: "#base"
}).$mount("#app");

ul.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

ul.nav>li {
  float: left;
}

ul.nav>li>a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul.nav>li>a:hover {
  background-color: #111;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.1.3/vue-router.min.js"></script>

<div id="app"></div>

<script type="text/x-template" id="base">
  <div id="app">
    <div>
      <navigation></navigation>
      <router-view></router-view>
    </div>
  </div>
</script>

<script type="text/x-template" id="navigation">
  <ul class="nav" id="navigation">
    <li>
      <router-link :to="{name: 'home'}">Home</router-link>
    </li>
    <li>
      <router-link :to="{name: 'about'}">About</router-link>
    </li>
    <li>
      <router-link :to="{name: 'work'}">Work</router-link>
    </li>
  </ul>
</script>

<script type="text/x-template" id="home">
  <div id="home">This is Home Page</div>
</script>

<script type="text/x-template" id="about">
  <div id="about">This is About Page</div>
</script>

<script type="text/x-template" id="work">
  <div id="work">
    <project v-if="currentProject" :project="currentProject"></project>
    <projects v-else :projects="projects"></projects>
  </div>
</script>

<script type="text/x-template" id="projects">
  <div id="projects">
    <ul>
      <li v-for="project in projects" :key="project.slug">
        <router-link :to="{name: 'work', params:{ slug: project.slug}}">{{project.name}}</router-link>
      </li>
    </ul>
  </div>
</script>

<script type="text/x-template" id="project">
  <div id="project">
    <h2>{{project.name}}</h2>
    <p>{{project.desc}}</p>
  </div>
</script>

It's not possible to dynamically create scoped css styles as these are made by vue-router during the build and not in the client.

However your current code should work if you want to apply the style to the <div> element, just include the styling within the curly brackets:

{
   "id":"11",
   "html":"<button>this is button</button>",
   "style":"font-size:18vw;color:#f00;",
   "author":"Test"
}

<div class="elements-head" v-html="item.html" :style="item.style">

example: https://jsfiddle.net/ellisdod/q3L5ahke/

Dynamic Components

However, If you want to apply styles to the element it's better to use dynamic components. The drawback to this is that you need to register all of your html scripts as components - you could write a loop to do this programmatically from your json.

Vue.component('MyButton',{
template:'<button>this is button</button>'
})

{
    "id":"11",
    "component":"MyButton",
    "style":"font-size:18vw;color:#f00;",
    "author":"Test"
}

<component :is="item.component" :style="item.style">

example: https://jsfiddle.net/ellisdod/oju1m7q8/