title: Vue component cannot resolve relative component imports in typescript
body: <p>I just upgraded to typescript using the vue-cli <code>vue upgrade typescript</code> command. The command exits succesfully. </p>
  
  <p>However, now, the relative imports that previously worked in javascript can no longer be resolved.</p>
  
  <p>I have the following Home component, that imports another component:</p>
  
  <pre><code>&lt;script lang="ts"&gt;
      import Navbar from "./Navbar"
  
      export default {
          name: "Home",
          components: {
              Navbar
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>The Navbar component:</p>
  
  <pre><code>&lt;script lang="ts"&gt;
  export default {
      name: "Navbar"
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>The <code>import Navbar from "./Navbar" statement</code> in the home component gives me the following error: <code>Cannot find module './Navbar'.Vetur(2307)</code></p>
  
  <p>I suspect it has something to do with the tsconfig configuration. It's auto generated as part of the automatic typescript upgrade:</p>
  
  <pre><code>{
    "compilerOptions": {
      "target": "esnext",
      "module": "esnext",
      "strict": true,
      "jsx": "preserve",
      "importHelpers": true,
      "moduleResolution": "node",
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "sourceMap": true,
      "baseUrl": ".",
      "types": [
        "webpack-env"
      ],
      "paths": {
        "@/*": [
          "src/*"
        ]
      },
      "lib": [
        "esnext",
        "dom",
        "dom.iterable",
        "scripthost"
      ]
    },
    "include": [
      "src/**/*.ts",
      "src/**/*.tsx",
      "src/**/*.vue",
      "tests/**/*.ts",
      "tests/**/*.tsx"
    ],
    "exclude": [
      "node_modules"
    ]
  }
  </code></pre>