use direct references to components that have been imported

src/generators/dom/index.js

@@ -191,6 +191,17 @@ export default function dom ( parsed, source, options, names ) {
 		// TODO remove the namespace property from the generated code, it's unused past this point
 	}
 
+	if ( templateProperties.components ) {
+		generator.importedComponents = {};
+		templateProperties.components.value.properties.forEach( property => {
+			const key = property.key.name;
+			const value = source.slice( property.value.start, property.value.end );
+			if ( generator.importedNames[ value ] ) {
+				generator.importedComponents[ key ] = value;
+			}
+		});
+	}
+
 	generator.push({
 		name: generator.alias( 'renderMainFragment' ),
 		namespace,

src/generators/dom/visitors/Component.js

@@ -106,7 +106,7 @@ export default {
 			componentInitProperties.push(`data: ${name}_initialData`);
 		}
 
-		const expression = node.name === ':Self' ? generator.name : `template.components.${node.name}`;
+		const expression = node.name === ':Self' ? generator.name : generator.importedComponents[ node.name ] || `template.components.${node.name}`;
 
 		local.init.addBlockAtStart( deindent`
 			${statements.join( '\n\n' )}